@xwink/ui

Segmented

一排互斥选项拼成一块,用于视图切换、明暗档、密度这类少量对等选项。选项多到需要滚动或搜索时 用 Select,只有两个对立状态用 Switch

行为层是 Reka 的 ToggleGroup:方向键在组内移动焦点、Home/End 跳首尾,整组只占一个 Tab 位。

基础

文字 / 纯图标 / 禁用

icon-only 时文字退到 aria-labeltitle——窄容器(比如资料弹层里的主题切换)能省一半宽度, 读屏和悬停提示都还在。

两个约定

没有「都不选」这一档:Reka 的 single 模式点当前项会取消选中,分段控件清空后连高亮都没有、 看着像坏了,所以组件把空值丢弃。要表达「未选择」请换用 XSelect 的 placeholder。

分段项不复用 XButton:独立按钮带悬停抬升,拼进一组后只有指到的那一个跳出对齐线、 和邻居的缝隙跟着错位。分段项自己一套类,只换底色不动位置。

API

Props

名称类型默认值说明
options 必填 SegmentedOption<TValue>[]
labelstring | undefinedundefined整组的可访问名,落在 role="group" 上
iconOnlyboolean | undefinedfalse只显示图标,文字退到 aria-label 与 title——窄容器(如资料弹层)里省一半宽度
disabledboolean | undefinedfalse
size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
modelValue 必填 TValue

Emits

事件载荷说明
update:modelValue[value: TValue]