跳到主要内容

Segmented 分段选择Segmented

在两到五个并列的短选项之间切换，通常用来换视图或筛选条件，切换后立即生效。选项多或文字长时用 Select 或 Radio；切换的是整块内容区时用 Tabs。

基本用法

默认选中第一个可用项。共享的滑块会滑到选中项上。

尺寸与撑满

图标

icon 放在文字前。只有图标时把 label 留空，并给这一项 aria-label。

禁用

受控用法

组件是泛型的：把 value 的联合类型传进去，onChange 的参数类型也跟着收窄。放进 Field 可以得到可见的标签。

当前视图：week

配合 Field

按年付费省 20%

规格

尺寸
总高 40 / 32 · 轨道内边距 3
选中块
translate + width · 弹簧
途中
scale 1.05 × .86 压扁再复原
键盘
← → 切换

API

Segmented

属性类型默认值说明
options*SegmentedOption<T>[]—选项列表。
valueT—选中项（受控）。
defaultValueT第一个可用项初始选中项（非受控）。
onChange(value: T) => void—选中项变化时触发。
size'sm' | 'md' | 'lg''md'尺寸。
blockboolean—撑满一行，各项等宽。
disabledboolean—整体禁用。

SegmentedOption

属性类型默认值说明
value*T extends string—这一项的值。
label*ReactNode—文字；只有图标时传空字符串。
iconReactNode—文字前的图标。
disabledboolean—禁用这一项。
aria-labelstring—只有图标时的可读名称。

无障碍

  • 根节点是 role="radiogroup"，每一项是 role="radio" 的按钮，用 aria-checked 表达选中。
  • 整组只有一个 Tab 停靠点（选中项）。← → ↑ ↓ 移动并同时选中，到头循环；Home / End 到两端；禁用项被跳过。
  • 必须有可读名称：aria-label，或放进带 label 的 Field。
  • 只有图标的项必须给 aria-label。
  • 选中靠滑块的底色和位置表达，不依赖强调色。