@xwink/ui

Toggle

按下 / 弹起两态的开关按钮,如粗体、锁定比例。行为层是 Reka 的 Toggle(aria-pressed、空格 / 回车切换)。一组相关的开关用 ToggleGroup;表示设置项「开 / 关」用 Switch。

只放图标时 label 落在 aria-label,并声明名字型悬停提示 data-tip(不带值,由全局提示取 aria-label)——不用原生 title,它要等一秒才出、样式跟系统走。按下态是主色淡底加主色图标,与悬停的灰底分得开。

基础

默认幽灵外观(ghost,工具条里),variant="outline" 单独放在表单或卡片里。

图标开关 / 描边 / 禁用

带文字

默认插槽可放图标加文字。放了可见文字就不传 label:aria-label 会顶掉可见文字成为读屏名。

图标加文字

API

Props

名称类型默认值说明
iconstring | undefinedundefined—
labelstring | undefinedundefined读屏名(落在 `aria-label`),同时声明名字型悬停提示(`data-tip`);默认插槽放了可见文字时不传
variantToggleVariant | undefined"ghost"—
disabledboolean | undefinedfalse—
size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
modelValueboolean | undefinedfalse—

Emits

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

Slots

插槽说明
default—