Segmented
一排互斥选项拼成一块,用于视图切换、明暗档、密度这类少量对等选项。选项多到需要滚动或搜索时 用 Select,只有两个对立状态用 Switch。
行为层是 Reka 的 ToggleGroup:方向键在组内移动焦点、Home/End 跳首尾,整组只占一个 Tab 位。
基础
外观是工具组配方(TOOL_GROUP / TOOL_ITEM,与 Toolbar 同一套):容器内边距等于项间隔、内外圆角同心,项各自带圆角。选中缺省是灰底(悬停 10%、选中 15%、选中项上悬停 20%,前景从弱化色升到正文色)——主色留给导航与主按钮;给了 color(含 primary)才换成该颜色的主色版。
文字 / 纯图标 / 主色版 / 禁用
icon-only 时文字退到 aria-label 与 title——窄容器(比如编辑器面板里的视图切换)能省一半宽度,
读屏和悬停提示都还在。
两个约定
没有「都不选」这一档:Reka 的 single 模式点当前项会取消选中,分段控件清空后连高亮都没有、
看着像坏了,所以组件把空值丢弃。要表达「未选择」请换用 XSelect 的 placeholder。
分段项不复用 XButton:各自带圆角、底色与悬停动效的独立按钮拼进一组,悬停底断成几截、
指到的那个还可能跳出对齐线。分段项走工具组配方,只换底色不动位置。
与 ToggleGroup 的分工:分段控件是文字型、页签式的少量互斥选项,必须选一个;开关组是工具条里的图标开关,可以全不选、可以多选。
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 |
color | UiColor | undefined | undefined | 色块颜色:`primary`(缺省,跟宿主主色)/ `danger` / `success` / `warning` / `info`,或十六进制 `#rrggbb` |
variant | FieldVariant | undefined | undefined | — |
modelValue 必填 | TValue | — | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: TValue] | — |