@xwink/ui

    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>[]——
    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
    colorUiColor | undefinedundefined色块颜色:`primary`(缺省,跟宿主主色)/ `danger` / `success` / `warning` / `info`,或十六进制 `#rrggbb`
    variantFieldVariant | undefinedundefined—
    modelValue 必填 TValue——

    Emits

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