代码演示
如何引入
基本
你可以通过
通过
onChange 监听状态变化，通过 defaultChecked 或受控的 checked 制定选中状态。通过
aria-label 描述该 Switch 开关的具体作用尺寸
你可以通过 size 指定尺寸
不可用
带文本
可以通过
注意：此项功能在最小的开关(即 size='small'时)无效
checkedText 与 uncheckedText 设置开关时的文本注意：此项功能在最小的开关(即 size='small'时)无效
相比于通过 chekedText 与 uncheckedText 设置内嵌的文本，我们更推荐将文本说明放置在 Switch 外部
受控组件
组件是否选中完全取决于传入的 checked 值，配合 onChange 回调函数使用
加载中
version: >= 1.29.0
可以通过设置 loading="true" 开启加载中状态。
API 参考
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| aria-label | aria-label属性，用来给当前元素加上的标签描述, 提升可访问性 | string | 2.2.0 | |
| aria-labelledby | aria-labelledby属性，表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 | string | 2.2.0 | |
| className | 类名 | string | ||
| checked | 指示当前是否选中,配合 onChange 使用 | boolean | false | |
| checkedText | 打开时展示的内容, size 为 small 时无效 | ReactNode | ||
| defaultChecked | 初始是否选中 | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| loading | 设置加载状态 | boolean | false | 1.29.0 |
| onChange | 变化时回调函数 | function(checked:boolean) | ||
| onMouseEnter | 鼠标移入时回调 | function() | ||
| onMouseLeave | 鼠标移出时回调 | function() | ||
| size | 尺寸,可选值large,default,small | string | 'default' | |
| style | 内联样式 | object | ||
| uncheckedText | 关闭时展示的内容, size 为 small 时无效 | ReactNode |
Accessibility
ARIA
- Switch 具有
switchrole，当 checked 为 true 时，aria-checked将被自动设置为 true，反之亦然 - 作为表单控件应该带有 Label，当你使用 Form.Switch 时会自动被带上
- 如果你单独使用 Switch，建议使用
aria-label描述当前标签作用
键盘和焦点
- 键盘用户可以使用
Tab及Shift + Tab切换焦点 - 聚焦时可以通过
Space键切换开启或关闭状态
