Switch
Switch 用于在选中和未选中状态之间进行切换。
使用
Disabled
Sizes
Colors
With Thumb Icons
With Icons
您还可以通过使用 startIcon 和 endIcon 属性，在 Switch 的开头和结尾添加图标。
Controlled
API
Switch Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | 'blue'|'orange'|'yellow'|'ryan'|'red'|'green'|'pick'|'purple'|'gray' | 'blue' | Switch 的颜色。 |
| size | 'sm'|'md'|'lg' | 'md' | Switch 的大小。 |
| checked | boolean | - | Switch 是否选中。 |
| defaultChecked | boolean | - | Switch 是否默认选中（非受控）。 |
| disabled | boolean | - | Switch 是否禁用。 |
| name | string | - | Switch 的 name。 |
| className | ClassValue | - | 用于根元素的 className。 |
| startIcon | ReactNode | - | Switch 开头的图标。 |
| endIcon | ReactNode | - | Switch 结尾的图标。 |
| thumbIcon | ReactNode|(state: SwitchOwnerState) => ReactNode | - | 滑块内部的图标。 |
| ref | Ref | - | 用于转发 Switch 内的 input |
| onChange | function | - | 当 Switch 状态发生变化时会触发该回调函数。 |
| as | ElementType | 'input' | 用于 Switch 内 input 的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | CSSObject|CSSObject[]|(ownerState: OwnerState) => CSSObject | CSSObject[]) | - | 用于根元素的 sx 属性。 |
| classes | Partial<Record<Slots, ClassValue>> | - | Switch Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentPropsWithRef>> | - | Switch Slots 的 props。 |
Switch Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| root | .nui-switch-root | 'label' | Switch 的根元素。 |
| input | .nui-switch-input | 'input' | Switch 内的 input。 |
| track | .nui-switch-track | 'span' | startIcon、endIcon 和 thumb 的容器。 |
| startIcon | .nui-switch-start-icon | 'span' | Switch 内开头图标的容器。 |
| endIcon | .nui-switch-end-icon | 'span' | Switch 内结尾图标的容器。 |
| thumb | .nui-switch-thumb | 'span' | Switch 内的滑块。 |
最后更新时间