标签滑块

介绍

标签滑块（Label Slider）是一个滑块类的高阶组件，它提供了一种自定义滑块标签和图像的方式。

我们仍以空调为例。与 状态按钮（State Button）类似，你可能想要提供一种滑块类的别致方式来改变空调的风量。当滑块被拖动时，风量会相应地发生变化，并且旁边会有一个突出显示的标签，表明滑块当前处于哪个刻度，也许你还想展示另一张图像来生动地显示风量的强弱程度。没错，这是一种很常见的情况。“标签滑块” 就是为此而产生的。

标签滑块 包含以下被包裹的小部件：

• 容器（x1）：为高阶组件（HoC）提供背景
• 图像（x3）：为各种状态提供图像
• 标签（x3）：为各种状态提供标签
• 滑块（x1）：提供交互行为

标签滑块 具有以下属性：

• 状态（States）

  配置高阶组件拥有多少种状态，并且每种状态有：

  • 最多 3 张可配置的图像
  • 最多 3 张可配置的标签

• 当前状态（Current state）

  高阶组件的当前状态，你可以更改它以查看高阶组件是如何变化的

滑块标签

如我们所说，最多有 3 个可配置的标签。但实际上其中有一个是半可配置的，就是滑块标签，也就是滑块旁边的那个标签。该标签的 “垂直”（对于垂直滑块而言）或 “水平”（对于水平滑块而言）位置是自动计算的，以使其与滑块的刻度保持对齐。换句话说，你只能改变标签与滑块之间的距离。

编辑标签滑块

默认情况下，标签滑块 会显示两张图像和滑块标签。如果你想显示更多的图像和标签，可以右键单击高阶组件并选择 “编辑”，进入高阶组件编辑器来更改默认配置。

默认配置下的 标签滑块 如下图所示：

其设置如下图所示：

如果你想以另一种方式放置图像和标签，只需右键单击并进行更改，这与 状态按钮 的操作类似。 所有小部件都取消隐藏后的 标签滑块 如下图所示：

其设置如下图所示：