介绍

标签滑块是扩展滑块功能的高阶组件，具有可自定义的标签和图像。

以空调控制为例，标签滑块为音量调节提供了优雅的解决方案。当用户拖动滑块时，音量级别相应变化，而突出显示的标签指示当前位置。可以实现视觉指示器来表示音量强度。该组件解决了直观的基于滑块的控制的常见需求。

组件结构

标签滑块封装了以下组件：

• 容器(x1)：为HoC提供背景
• 图像(x3)：为每个状态显示图像
• 标签(x3)：为每个状态显示标签
• 滑块(x1)：处理用户交互

属性

标签滑块提供以下可配置属性：

状态 配置HoC的状态数量，每个状态支持：

• 最多3个可配置图像
• 最多3个可配置标签

当前状态 表示HoC的活动状态。可以修改此值以观察视觉变化。

滑块标签

虽然最多可以配置3个标签，但一个标签作为滑块标签具有半可配置定位。该标签自动与滑块的当前刻度位置对齐。对于垂直滑块，垂直位置自动计算，对于水平滑块，水平位置自动计算。用户只能调整标签与滑块之间的距离。

配置

默认情况下，标签滑块显示两个图像和滑块标签。要显示其他图像和标签，请右键单击HoC并选择编辑以访问HoC编辑器进行配置修改。

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

相应的设置显示为：

要自定义图像和标签的布局，请右键单击并使用与状态按钮相同的方法进行修改。

显示所有组件的完整配置标签滑块如下所示：

相应的设置显示为：