JavaScript ArcGIS Slider.TickConfig用法及代码示例

基本信息

以下是所在类或对象的基本信息。

AMD: require(["esri/widgets/Slider"], (Slider) => { /* code goes here */ });

ESM: import Slider from "@arcgis/core/widgets/Slider";

类： esri/widgets/Slider

继承: Slider > Widget > Accessor

自从：用于 JavaScript 4.12 的 ArcGIS API

用法说明

Slider.TickConfig函数(或属性)的定义如下：

TickConfig

用于配置滑块上的刻度的对象规范。应在tickConfigs 属性上设置这些对象的数组。

属性：

类型说明

mode String

沿着滑块轨道定位刻度的模式或方法。有关可能值的列表，请参见下表。

可能的值	说明
count	将固定数量的刻度(在`values` 属性中提供)放置在滑块轨道下方彼此等距的位置。
percent	设置后，并且在 `values` 属性上设置了一个数字，刻度将沿着滑块的长度以指定的百分比间隔放置。例如，当 `mode` 为百分比且 `values` 为 `5` 时，滑块轨道下方将放置 20 个刻度(彼此之间以 5% 的间隔)。如果提供了 `values` 数组，则这些值将被解释为沿滑块的百分比。因此，如果 `values` 是 `[10, 50, 90]` ，那么三个刻度将放置在轨道下方；一个在中间点，两个距离滑块两端 10% 的长度。
position	指示仅将刻度放置在 `values` 属性中指定的值处。

可能的值："count"|"percent"|"position"

values Number|Number []

指示将在轨道下方呈现刻度的位置。有关每种模式如何解释此属性的更多信息，请参阅mode 的说明。

labelsVisible Boolean

可选的

指示是否为刻度呈现标签。

tickCreatedFunction TickCreatedFunction

可选的

为每个刻度触发的回调。您可以使用此属性覆盖默认行为和样式。

labelFormatFunction LabelFormatter

可选的

格式化刻度标签的回调。

例子：

// places 25 ticks on the slider track
// evenly spaced from one another
slider.tickConfigs = [{
  mode: "count",
  values: 25
}];

// places ticks spanning the width of
// the slider at 20% intervals from one another
// this is the equivalent of setting mode to 'count'
// and the values to 5.
slider.tickConfigs = [{
  mode: "percent",
  values: 20
}];

// Places three ticks on the slider: one positioned
// 10% of the width from the start (or min value), another
// directly in the middle (50% from the start), and
// another 90% of the width from the start of the slider.
// Because the values are %s the values are always relative
// regardless of the range of the slider values.
slider.tickConfigs = [{
  mode: "percent",
  values: [ 10, 50, 90 ]
}];

// Places 5 ticks on the slider at the slider values
// provided below. These are absolute positions.
slider.tickConfigs = [{
  mode: "position",
  values: [ 0, 5, 10, 15, 20 ]
}];

// Places a single tick at the location of the value of 5.
slider.tickConfigs = [{
  mode: "position",
  values: 5
}];

// Renders three groups of ticks. The first is a basic set
// of 25 ticks. The second places 4 ticks and adds custom
// CSS classes to modify their styling. The third adds
// a click event handler to the tick labels.
slider.tickConfigs = [{
  mode: "count",
  values: 25
}, {
  mode: "percent",
  values: [12.5, 37.5, 62.5, 87.5],
  labelsVisible: true,
  tickCreatedFunction: function(initialValue, tickElement, labelElement) {
    tickElement.classList.add("mediumTicks");
    labelElement.classList.add("mediumLabels");
  }
}, {
  mode: "count",
  values: 5,
  labelsVisible: true,
  tickCreatedFunction: function(initialValue, tickElement, labelElement) {
    tickElement.classList.add("largeTicks");
    labelElement.classList.add("largeLabels");
    labelElement.onclick = function() {
      const newValue = labelElement["data-value"];
      slider.values = [ newValue ];
    };
  }
}];

相关用法

注：本文由纯净天空筛选整理自arcgis.com大神的英文原创作品 Slider.TickConfig。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。