- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
开关选择器。
checkbox
的区别是,切换 switch
会直接触发状态改变,而 checkbox
一般用于状态标记,需要和提交操作配合。通用属性参考:通用属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
autoFocus | 组件自动获取焦点 | boolean | false |
checked | 指定当前是否选中 | boolean | false |
checkedChildren | 选中时的内容 | ReactNode | - |
className | Switch 器类名 | string | - |
defaultChecked | 初始是否选中 | boolean | false |
disabled | 是否禁用 | boolean | false |
loading | 加载中的开关 | boolean | false |
size | 开关大小,可选值:default small | string | default |
unCheckedChildren | 非选中时的内容 | ReactNode | - |
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 | 开关高度 | number | 22 |
trackHeightSM | 小号开关高度 | number | 16 |
trackMinWidth | 开关最小宽度 | number | 44 |
trackMinWidthSM | 小号开关最小宽度 | number | 28 |
trackPadding | 开关内边距 | number | 2 |
Form.Item 默认绑定值属性到 value
上,而 Switch 的值属性为 checked
。你可以通过 valuePropName
来修改绑定的值属性。
<Form.Item name="fieldA" valuePropName="checked"><Switch /></Form.Item>