Switch Component
This component is called Switch. It sounds just like a certain game console - makes me want to play so bad......
Basic Usage
Pass modelValue to enter controlled mode. If not passed or set to undefined, it will be in uncontrolled mode, and you can pass the defaultValue property as the default value.
Readonly & Disabled
readonly sets read-only status, and disabled sets disabled status. The internal <input> will be set to disabled in both cases. They differ almost only in style.
Loading State
loading sets the loading state, and a loading icon will be displayed.
Prompt Information
activeTip and inactiveTip set the text prompts inside the component. activeLabel and inactiveLabel set the text prompts on both sides of the component. Slot forms are also supported: active-tip, inactive-tip, active-label, inactive-label.
active-icon and inactive-icon set the icons of the switch.
Background Color
Set the background color through activeColor and inactiveColor.
Switch Size
The size property sets the size of the switch.
Switch Shape
The switch has two shapes: 'round' and 'rect', which are set via shape.
API
SwitchProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| modelValue | boolean | null | True | undefined | The value of the switch (controlled mode), supports v-model. | 0.0.3 |
| defaultValue | boolean | null | True | undefined | The default value of the switch (uncontrolled mode). | 0.0.3 |
| shape | 'round' | 'rect' | True | 'round' | The shape of the switch. | 0.0.3 |
| size | 'small' | 'medium' | 'large' | True | 'medium' | The size of the switch. | 0.0.3 |
| readonly | boolean | True | false | Whether it is read-only. | 0.0.3 |
| disabled | boolean | True | false | Whether it is disabled. | 0.0.3 |
| loading | boolean | True | false | Whether it is in loading state. | 0.0.3 |
| activeTip | string | True | | The text tip when selected, located inside the switch. | 0.0.3 |
| inactiveTip | string | True | | The text tip when not selected, located inside the switch. | 0.0.3 |
| activeLabel | string | True | | The text label when selected, located outside the switch. | 0.0.3 |
| inactiveLabel | string | True | | The text label when not selected, located outside the switch. | 0.0.3 |
| activeColor | string | True | | The label color when selected. See Supported Color Parsing. | 0.0.3 |
| inactiveColor | string | True | | The label color when not selected. See Supported Color Parsing. | 0.0.3 |
| pollSizeChange | boolean | True | false | Enables polling for component size changes. This also affects the property of the same name in data input components that are child components. | 0.1.0 |
SwitchEvents
| Event | Parameter | Description | Version |
|---|---|---|---|
| update:modelValue | value: boolean | Callback for updating modelValue. | 0.0.3 |
| input | value: boolean, event: InputEvent | Callback when the switch is triggered. | 0.0.3 |
| change | value: boolean, event: Event | Callback when the switch's selection state changes. | 0.0.3 |
| focus | event: FocusEvent | Callback when the switch is focused. | 0.0.3 |
| blur | event: FocusEvent | Callback when the switch is blurred. | 0.0.3 |
SwitchSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| active-tip | | Tip when selected, located inside the switch. | 0.0.3 |
| inactive-tip | | Tip when not selected, located inside the switch. | 0.0.3 |
| active-label | | Text label when selected, located outside the switch. | 0.0.3 |
| inactive-label | | Text label when not selected, located outside the switch. | 0.0.3 |
| active-icon | | Icon when selected. | 0.0.3 |
| inactive-icon | | Icon when not selected. | 0.0.3 |