ToggleGroup
工具条里的一排图标开关:单选(左中右对齐)或多选(multiple,粗斜下划线),都可以一个不选。行为层是 Reka 的 ToggleGroup:整组一个 Tab 位,方向键在组内移动焦点。
与 Segmented 的分工:分段控件是文字型、页签式的少量互斥选项,必须选一个,外观是拼成一块的描边组;开关组是工具条里的图标开关,可以全不选、可以多选,外观是幽灵按钮(不上移),放进工具条后外框只有工具条一层描边。
有图标的项只显示图标,label 落在 aria-label 并声明名字型悬停提示 data-tip;没图标的项显示文字。
基础
单选对齐 / 多选样式
对齐:left;样式:bold
放进工具条
浮动工具条
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
options 必填 | ToggleGroupOption<ToggleGroupItemValue<TModel>>[] | — | — |
multiple | boolean | undefined | false | 多选:`v-model` 是数组 |
label | string | undefined | undefined | 整组的读屏名,落在 role="group" 上 |
variant | ToggleVariant | undefined | "ghost" | — |
orientation | "vertical" | "horizontal" | undefined | "horizontal" | — |
disabled | boolean | undefined | false | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
modelValue | TModel | undefined | — | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: TModel | undefined] | — |