开发指南
何时使用
开/关切换器切换单个设置选项的状态。开关控制器中的选项,以及它所在的状态,应该用伴随的内联标签显示清楚。开关选择器具有和单选按钮一样的视觉属性。使用文本“开”和“关”滑动切换已经过时了。使用这里显示的开关选择器代替。
开/关切换器切换单个设置选项的状态。开关控制器中的选项,以及它所在的状态,应该用伴随的内联标签显示清楚。开关选择器具有和单选按钮一样的视觉属性。使用文本“开”和“关”滑动切换已经过时了。使用这里显示的开关选择器代替。
最简单的用法,size 可设置大小。
受控开关, 是指组件的值由上层组件决定, 如果开关定义了 value
属性, 就表示此开关是受控开关.
Switch 失效状态。
通过loading
设置组件为加载中。
组件内部已支持无障碍,设置aria-label
对组件进行描述。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | switch 的尺寸 可选值: 'medium'(正常大小) 'small'(缩小版大小) | Enum | 'medium' |
onChange | 开关状态改变是触发此事件 签名: Function(checked: Boolean, e: Event) => void 参数: checked: {Boolean} 是否为打开状态 e: {Event} DOM 事件对象 | Function | () => {} |
checked | 开关当前的值(针对受控组件) | Boolean | - |
defaultChecked | 开关默认值 (针对非受控组件) | Boolean | false |
disabled | 表示开关被禁用 | Boolean | false |
loading | 表示开关处于加载中 | Boolean | false |
onClick | 鼠标点击事件 签名: Function(e: Event) => void 参数: e: {Event} DOM 事件对象 | Function | - |
onKeyDown | 键盘按键事件 签名: Function(e: Event) => void 参数: e: {Event} DOM 事件对象 | Function | - |
支持键盘控制,tab 选中后按回车进行状态切换。
按键 | 说明 |
---|---|
Enter | 切换选中状态 |
SPACE | 切换选中状态 |