SegmentedControl 分段控制器
SegmentedControl 是一排互斥的分段,和 Apple 的分段控件一样,用来在少数几个视图、范围或模式里选一个。选中的分段下面有一块指示器,切换时它会滑到新的分段上。适合两到五个短选项;选项更多或文字更长时,用下拉选择更合适。
演示
基础用法
传入 options,每项有 label 和 value。所有分段和最宽的那个一样宽。
尺寸
size 和按钮的高度一致:small、medium(默认)和 large。
图标
带 icon 的选项只显示图标,label 用作无障碍名称和悬停提示。要么每个选项都用图标,要么都不用,不要混搭。
宽度
itemWidth="content" 让每个分段按自己的文字定宽,而不是一样宽。block 让控件撑满容器。
禁用
选项上的 disabled 让这一项不可选;控件上的 disabled 禁用所有分段。
受控
传入 value 和 onUpdateValue,由你来管理选中项。null 表示什么都不选。
无障碍
控件是一个 radiogroup,里面每个分段是 radio,所以请给它加上 aria-label 或 aria-labelledby。Tab 只停在选中的分段上(没有选中时停在第一个可用的分段);方向键切换选中项,会跳过禁用的分段并循环,Home 和 End 跳到第一个和最后一个。
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
options | SegmentedControlOption[] | 必填 | 按顺序排列的分段:{ label, value, disabled?, icon? }。 | 未发布 |
value | string | number | null | undefined | 受控时的选中值;null 表示不选。 | 未发布 |
defaultValue | string | number | null | null | 非受控时的初始选中值。 | 未发布 |
onUpdateValue | (value, option) => void | undefined | 选中项变化时调用,参数是新的值和对应的选项。 | 未发布 |
size | small | medium | large | medium | 高度,和按钮一致。 | 未发布 |
itemWidth | equal | content | equal | equal 让所有分段和最宽的一样宽;content 按各自的文字定宽。 | 未发布 |
block | boolean | false | 撑满容器的宽度。 | 未发布 |
disabled | boolean | false | 禁用所有分段。 | 未发布 |
name | string | undefined | 提交表单时,用这个名字带上选中值。 | 未发布 |
SegmentedControl 同样支持原生 div 属性和 ref。