@xwink/ui

ToggleGroup

工具条里的一排图标开关:单选(左中右对齐)或多选(multiple,粗斜下划线),都可以一个不选。行为层是 Reka 的 ToggleGroup:整组一个 Tab 位,方向键在组内移动焦点。

与 Segmented 的分工:分段控件是文字型、页签式的少量互斥选项,必须选一个,外观是拼成一块的描边组;开关组是工具条里的图标开关,可以全不选、可以多选,外观是幽灵按钮(不上移),放进工具条后外框只有工具条一层描边。

有图标的项只显示图标,label 落在 aria-label 并声明名字型悬停提示 data-tip;没图标的项显示文字。

基础

单选对齐 / 多选样式

对齐:left;样式:bold

放进工具条

浮动工具条

API

Props

名称类型默认值说明
options 必填 ToggleGroupOption<ToggleGroupItemValue<TModel>>[]——
multipleboolean | undefinedfalse多选:`v-model` 是数组
labelstring | undefinedundefined整组的读屏名,落在 role="group" 上
variantToggleVariant | undefined"ghost"—
orientation"vertical" | "horizontal" | undefined"horizontal"—
disabledboolean | undefinedfalse—
size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
modelValueTModel | undefined——

Emits

事件载荷说明
update:modelValue[value: TModel | undefined]—