KSwitch
示例
Toggle switches
Toggle switch with v-model binding, size variants, and optional label.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | boolean | false | Bound value via v-model. |
| disabled | boolean | false | Whether the switch is disabled. |
| size | 'sm' | 'default' | 'default' | Size of the switch. |
| label | string | — | Optional label text displayed next to the switch. |
| theme | 'auto' | 'day' | 'night' | 'auto' | Theme mode. auto follows the current theme; day and night force a specific mode. |
Emits
| Name | Parameters | Description |
|---|---|---|
| update:modelValue | (value: boolean) | Emitted when the switch is toggled. |
Basic Usage
vue
<script setup>
import { ref } from 'vue'
import { KSwitch } from '@kK-2004/ui-component'
const enabled = ref(false)
</script>
<template>
<KSwitch v-model="enabled" label="Enable feature" />
</template>