Segmented
一排互斥选项拼成一块,用于视图切换、明暗档、密度这类少量对等选项。选项多到需要滚动或搜索时 用 Select,只有两个对立状态用 Switch。
行为层是 Reka 的 ToggleGroup:方向键在组内移动焦点、Home/End 跳首尾,整组只占一个 Tab 位。
基础
文字 / 纯图标 / 禁用
icon-only 时文字退到 aria-label 与 title——窄容器(比如资料弹层里的主题切换)能省一半宽度,
读屏和悬停提示都还在。
两个约定
没有「都不选」这一档:Reka 的 single 模式点当前项会取消选中,分段控件清空后连高亮都没有、
看着像坏了,所以组件把空值丢弃。要表达「未选择」请换用 XSelect 的 placeholder。
分段项不复用 XButton:独立按钮带悬停抬升,拼进一组后只有指到的那一个跳出对齐线、
和邻居的缝隙跟着错位。分段项自己一套类,只换底色不动位置。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
options 必填 | SegmentedOption<TValue>[] | — | — |
label | string | undefined | undefined | 整组的可访问名,落在 role="group" 上 |
iconOnly | boolean | undefined | false | 只显示图标,文字退到 aria-label 与 title——窄容器(如资料弹层)里省一半宽度 |
disabled | boolean | undefined | false | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
modelValue 必填 | TValue | — | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: TValue] | — |