参考
开关 Switch
Switch:开关。关闭时轨道呈纸面的内凹阴影,开启后用 primary 墨色平铺填充,手柄以回弹曲线滑动。部件:Root、Label、Control、Thumb、HiddenInput。
Root · Label · Control · Thumb
#Control
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#HiddenInput
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Label
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | 开关手柄的尺寸档位,轨道随之变化 |
checked | boolean | switch 的受控选中状态 | |
defaultChecked | boolean | switch 渲染时的初始选中状态;不需要控制选中状态时使用 | |
disabled | boolean | switch 是否禁用 | |
form | string | switch 所属表单的 id | |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> | switch 各元素的 id,适合组合使用 | |
invalid | boolean | 为 true 时 switch 标记为无效 | |
label | string | 无障碍元素及其状态的本地化文案 | |
name | string | switch 中 input 字段的 name,用于表单提交 | |
readOnly | boolean | switch 是否只读 | |
required | boolean | 为 true 时 switch input 标记为必填 | |
value | string | "on" | 复选框 input 的值,用于表单提交 |
| 事件 | 载荷 |
|---|---|
checkedChange | details: CheckedChangeDetails |
update:checked | checked: boolean |
#Thumb
纯造型的部件——自身没有属性,沿用部件结构的共享样式。