跳到正文

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

名称类型默认值说明版本
optionsSegmentedControlOption[]必填按顺序排列的分段:{ label, value, disabled?, icon? }。未发布
valuestring | number | nullundefined受控时的选中值;null 表示不选。未发布
defaultValuestring | number | nullnull非受控时的初始选中值。未发布
onUpdateValue(value, option) => voidundefined选中项变化时调用,参数是新的值和对应的选项。未发布
sizesmall | medium | largemedium高度,和按钮一致。未发布
itemWidthequal | contentequalequal 让所有分段和最宽的一样宽;content 按各自的文字定宽。未发布
blockbooleanfalse撑满容器的宽度。未发布
disabledbooleanfalse禁用所有分段。未发布
namestringundefined提交表单时,用这个名字带上选中值。未发布

SegmentedControl 同样支持原生 div 属性和 ref。