Switch开关
Switch
开关
使用开关切换两种状态之间。
使用import{ Switch }from"antd"; |
何时使用
- 需要表示开关状态/两种状态之间的切换时；
- 和
checkbox的区别是，切换switch会直接触发状态改变，而checkbox一般用于状态标记，需要和提交操作配合。
代码演示
API
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoFocus | 组件自动获取焦点 | boolean | false | |
| checked | 指定当前是否选中 | boolean | false | |
| checkedChildren | 选中时的内容 | ReactNode | - | |
| className | Switch 器类名 | string | - | |
| defaultChecked | 初始是否选中 | boolean | false | |
| defaultValue | defaultChecked 的别名 | boolean | - | 5.12.0 |
| disabled | 是否禁用 | boolean | false | |
| loading | 加载中的开关 | boolean | false | |
| size | 开关大小，可选值：default small | string | default | |
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
| value | checked 的别名 | boolean | - | 5.12.0 |
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - |
方法
| 名称 | 描述 |
|---|---|
| blur() | 移除焦点 |
| focus() | 获取焦点 |
主题变量（Design Token）
组件 Token如何定制？
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| handleBg | 开关把手背景色 | string | #fff |
| handleShadow | 开关把手阴影 | string | 0 2px 4px 0 rgba(0,35,11,0.2) |
| handleSize | 开关把手大小 | number | 18 |
| handleSizeSM | 小号开关把手大小 | number | 12 |
| innerMaxMargin | 内容区域最大边距 | number | 24 |
| innerMaxMarginSM | 小号开关内容区域最大边距 | number | 18 |
| innerMinMargin | 内容区域最小边距 | number | 9 |
| innerMinMarginSM | 小号开关内容区域最小边距 | number | 6 |
| trackHeight | 开关高度 | string | number | 22 |
| trackHeightSM | 小号开关高度 | string | number | 16 |
| trackMinWidth | 开关最小宽度 | string | number | 44 |
| trackMinWidthSM | 小号开关最小宽度 | string | number | 28 |
| trackPadding | 开关内边距 | number | 2 |
全局 Token如何定制？
FAQ
为什么在 Form.Item 下不能绑定数据？
Form.Item 默认绑定值属性到 value 上，而 Switch 的值属性为 checked。你可以通过 valuePropName 来修改绑定的值属性。
<Form.Item name="fieldA" valuePropName="checked"><Switch /></Form.Item>