SegmentedSlider 分段滑块

在一组离散档位中选择一项的滑块

已验证自 0.3.4

用法

基础

示例加载中...

自定义分段

value 可以是字符串，label 可以是任意文本，包括 emoji。

示例加载中...

发布策略配置

风险档位用 TxSegmentedSlider，流量比例用 TxSlider。

示例加载中...

最佳实践

使用 3–7 个稳定分段；长列表或动态选项改用 TxSelect 或 TxSearchSelect。
每个分段的 value 用原始类型且唯一。
只有相邻文案已解释每个刻度时才关闭 showLabels。
连续数值用 TxSlider；风险、套餐、质量门禁等有序档位用 TxSegmentedSlider。

API 参考

属性

属性名	类型	默认值	说明
`modelValue`	`number \| string \| null`	`0`	选中的分段值；为 `null` 时挂载后自动选中第一段。
`segments`	`SegmentedSliderSegment[]`	`[]`	沿轨道依次排列的分段。
`disabled`	`boolean`	`false`	禁止点击与键盘改变选择。
`showLabels`	`boolean`	`true`	显示分段的 `label`（若提供）。
`vertical`	`boolean`	`false`	改为纵向轨道，进度自下而上。

事件

事件名	参数	说明
`update:modelValue`	`(value: number \| string)`	点击或用键盘选择分段时触发。
`change`	`(value: number \| string)`	与 `update:modelValue` 同时触发。

类型

export interface SegmentedSliderSegment {
  value: number | string // 选中时发出的值
  label?: string // 分段旁的文字
}

概述

整行是 radiogroup，每个停靠点是 radio。
Tab 只进入一次，落在当前值；方向键移动并在两端停住，Home / End 直达首尾。纵向布局中向上为前进。
焦点环只在键盘操作时出现；悬停时未选中的点略微放大。减弱动效下两者都停止。

技术实现

源码：packages/tuffex/packages/components/src/segmented-slider/。

packages/tuffex/packages/components/src/segmented-slider/index.ts