开关组件
开/关切换器切换单个设置选项的状态。开关控制器中的选项,以及它所在的状态,应该用伴随的内联标签显示清楚。开关选择器具有和单选按钮一样的视觉属性。使用文本“开”和“关”滑动切换已经过时了。使用这里显示的开关选择器代替。
对于 checkChildren 和 unCheckedChildren 的自定义要考虑文字大小,因为 switch 的宽度有限,默认一个汉字大小。如果设置成多个字或者英文要注意宽度控制。
1.23 版本增加了 autoWidth API,我们推荐用户默认开启,同时在 2.0 里也会默认设置为 true。开启后,原 <Switch style={{display: 'block'}}> 写法的用户可能会出现样式异常。
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| defaultChecked | 开关是否打开默认值 (非受控) | boolean | false | |
| checked | 开关是否打开(受控) | boolean | - | |
| onChange | 开关状态改变时事件 签名: 参数: checked: 是否打开 |
( checked: boolean, e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> ) => void |
- | |
| size | switch 的尺寸 | 'medium' | 'small' | 'medium' | |
| loading | 加载状态 | boolean | false | |
| disabled | 表示开关被禁用 | boolean | false | |
| autoWidth | 宽度根据内容自适应 | boolean | false | |
| isPreview | 是否预览模式 | boolean | false | |
| renderPreview | 自定义预览态模式下渲染的内容 签名: 参数: checked: 是否打开 props: 组件参数对象 返回值: 预览模式下的渲染内容 |
(checked: boolean, props: SwitchProps) => React.ReactNode | - | |
| checkedChildren | 打开时的内容 | React.ReactNode | - | |
| unCheckedChildren | 关闭时的内容 | React.ReactNode | - | |
| onClick | 鼠标点击事件 | (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void | - | |
| onKeyDown | 键盘按键事件 | (e: React.KeyboardEvent<HTMLDivElement>) => void | - |
| 按键 | 说明 |
|---|---|
| Enter | 切换选中状态 |
| SPACE | 切换选中状态 |