Onu UISwitch
Switch is a checkbox that is styled to look like a switch button.
Basic usage
Use o variants to determine component colors.
Light style
If you want to use the light style, set the light attribute to true.
Custom dot color
Don't like the theme color? Switch provides access to custom colors.
You can set the o variant to a custom active color. Set the background-color attribute to an unactive color.
Sizes
Besides the default size, Switch provides three additional sizes for you to choose among different scenarios.
Use the attribute size to set additional sizes with sm,md,lg.
Disabled
The disabled attribute determines if the switch is disabled.
Use the disabled attribute to determine whether a switch is disabled. Switch accepts a Boolean value.
Icon Slots
TODO
Switch Props
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue / v-model | boolean | false | Binding value. |
| size | 'sm' | 'md' | 'lg' | 'md' | Switch size. |
| o | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'primary' | Switch type. |
| light | boolean | false | Determine whether it's a light switch. |
| disabled | boolean | false | Disable the switch. |
| background-color | string | undefined | Custom the switch dot or background color. |