Switch 开关组件

开发指南

开关组件

何时使用

开/关切换器切换单个设置选项的状态。开关控制器中的选项,以及它所在的状态,应该用伴随的内联标签显示清楚。开关选择器具有和单选按钮一样的视觉属性。使用文本“开”和“关”滑动切换已经过时了。使用这里显示的开关选择器代替。

使用注意

  • 对于 checkChildren 和 unCheckedChildren 的自定义要考虑文字大小,因为 switch 的宽度有限,默认一个汉字大小。如果设置成多个字或者英文要注意宽度控制。



简单

最简单的用法,size 可设置大小。

value of switch: false

受控开关

受控开关, 是指组件的值由上层组件决定, 如果开关定义了 value 属性, 就表示此开关是受控开关.



不可用

Switch 失效状态。

无障碍

组件内部已支持无障碍,设置aria-label对组件进行描述。

API

Switch

参数说明类型默认值
sizeswitch 的尺寸

可选值:
'medium'(正常大小)
'small'(缩小版大小)
Enum'medium'
onChange开关状态改变是触发此事件

签名:
Function(checked: Boolean, e: Event) => void
参数:
checked: {Boolean} 是否为打开状态
e: {Event} DOM 事件对象
Function() => {}
checked开关当前的值(针对受控组件)Boolean-
defaultChecked开关默认值 (针对非受控组件)Booleanfalse
disabled表示开关被禁用Booleanfalse
onClick鼠标点击事件

签名:
Function(e: Event) => void
参数:
e: {Event} DOM 事件对象
Function-
onKeyDown键盘按键事件

签名:
Function(e: Event) => void
参数:
e: {Event} DOM 事件对象
Function-

键盘支持

  • 支持键盘控制,tab 选中后按回车进行状态切换。

ARIA and KeyBoard

按键说明
Enter切换选中状态
SPACE切换选中状态