Switch
Switch
Used to toggle between two states.
가져오기import{ Switch }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
가져오기import{ Switch }from"antd"; |
Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoFocus | Whether get focus when component mounted | boolean | false | |
| checked | Determine whether the Switch is checked | boolean | false | |
| checkedChildren | The content to be shown when the state is checked | ReactNode | - | |
| className | The additional class to Switch | string | - | |
| defaultChecked | Whether to set the initial state | boolean | false | |
| defaultValue | Alias for defaultChecked | boolean | - | 5.12.0 |
| disabled | Disable switch | boolean | false | |
| loading | Loading state of switch | boolean | false | |
| size | The size of the Switch, options: default small | string | default | |
| unCheckedChildren | The content to be shown when the state is unchecked | ReactNode | - | |
| value | Alias for checked | boolean | - | 5.12.0 |
| onChange | Trigger when the checked state is changing | function(checked: boolean, event: Event) | - | |
| onClick | Trigger when clicked | function(checked: boolean, event: Event) | - |
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| 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 default bind value to value property, but Switch value property is checked. You can use valuePropName to change bind property.
<Form.Item name="fieldA" valuePropName="checked"><Switch /></Form.Item>
