Switch
Switch 用于在选中和未选中状态之间进行切换。
Usage
Disabled
Sizes
Colors
With Thumb Icons
With Icons
您还可以通过使用 startIcon 和 endIcon 属性，在 Switch 的开头和结尾添加图标。
Controlled
使用 checked 和 onCheckedChange 属性控制 Switch 的选中状态。
Checked: Yes
API
Switch Props
Switch 继承 as (默认为 'input') 的 Props。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Switch 的标签。 |
| color | 'blue'|'orange'|'yellow'|'cyan'|'red'|'green'|'pink'|'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: SwitchProps) => ReactNode | - | 滑块内部的图标。 |
| ref | Ref | - | 用于转发 Switch 内的 input |
| onChange | function | - | 当 Switch 状态发生变化时会触发该回调函数。 |
| onCheckedChange | (checked: boolean) => void | - | 当 Switch 状态发生变化时会触发该回调函数。 |
| as | ElementType | 'input' | 用于 Switch 内 input 的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | Interpolation | - | 用于根元素的 sx 属性。 |
| classNames | Partial<Record<Slots, ClassValue>> | - | Switch Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentProps>> | - | Switch Slots 的 props。 |
Switch Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| root | .nui-switch-root | 'label' | Switch 的根元素。 |
| 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 内的滑块。 |
| label | .nui-switch-label | 'span' | Switch 的标签。 |
最后更新时间