使用import { Switch } from "antd"; |
文档 |
文档贡献者
checkbox 的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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() | 获取焦点 |
| 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 |
Form.Item 默认绑定值属性到 value 上，而 Switch 的值属性为 checked。你可以通过 valuePropName 来修改绑定的值属性。
<Form.Item name="fieldA" valuePropName="checked"><Switch /></Form.Item>