🌏 Translated with the assistance of DeepSeek and ChatGPT
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.
<template>
<px-space>
<px-switch v-model="value"></px-switch>
<px-switch :default-value="true"></px-switch>
</px-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>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.
Disabled:
Readonly:
<template>
<px-space>
Disabled:
<px-switch disabled></px-switch>
<px-switch disabled :default-value="true"></px-switch>
Readonly:
<px-switch readonly></px-switch>
<px-switch readonly :default-value="true"></px-switch>
</px-space>
</template>Loading State
loading sets the loading state, and a loading icon will be displayed.
<template>
<px-space>
<px-switch loading></px-switch>
<px-switch loading :default-value="true"></px-switch>
<px-switch loading disabled></px-switch>
<px-switch loading disabled :default-value="true"></px-switch>
</px-space>
</template>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.
<template>
<px-space direction="vertical">
<px-switch size="small">
<template #active-icon><IconCheckSolid></IconCheckSolid></template>
<template #inactive-icon><IconTimesSolid></IconTimesSolid></template>
<template #active-label>Active</template>
<template #inactive-label>Inactive</template>
<template #active-tip>active</template>
<template #inactive-tip>inactive</template>
</px-switch>
<px-switch
active-label="Active"
active-tip="active"
inactive-label="Inactive"
inactive-tip="inactive"
>
<template #active-icon><IconCheckSolid></IconCheckSolid></template>
<template #inactive-icon><IconTimesSolid></IconTimesSolid></template>
</px-switch>
<px-switch size="large">
<template #active-icon><IconCheckSolid></IconCheckSolid></template>
<template #inactive-icon><IconTimesSolid></IconTimesSolid></template>
<template #active-label>Active</template>
<template #inactive-label>Inactive</template>
<template #active-tip>active</template>
<template #inactive-tip>inactive</template>
</px-switch>
</px-space>
</template>
<script setup lang="ts">
import { IconCheckSolid, IconTimesSolid } from '@pixelium/web-vue/icon-hn/es'
</script>Background Color
Set the background color through activeColor and inactiveColor.
<template>
<px-space>
<px-switch
active-color="#13ce66"
inactive-color="#ff4949"
active-label="Active"
active-tip="active"
inactive-label="Inactive"
inactive-tip="inactive"
>
<template #active-icon>T</template>
<template #inactive-icon>F</template>
</px-switch>
</px-space>
</template>Switch Size
The size property sets the size of the switch.
<template>
<px-space>
<px-switch size="small"></px-switch>
<px-switch></px-switch>
<px-switch size="large"></px-switch>
</px-space>
</template>Switch Shape
The switch has two shapes: 'round' and 'rect', which are set via shape.
<template>
<px-space>
<px-switch size="small"></px-switch>
<px-switch size="small" shape="normal"></px-switch>
<px-switch></px-switch>
<px-switch shape="normal"></px-switch>
<px-switch size="large"></px-switch>
<px-switch size="large" shape="normal"></px-switch>
</px-space>
</template>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, supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3, 4, 6, or 8-digit hexadecimal number representations. | 0.0.3 |
| inactiveColor | string | True | | The label color when not selected, supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3, 4, 6, or 8-digit hexadecimal number representations. | 0.0.3 |
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 |