17 lines
802 B
Vue
17 lines
802 B
Vue
<template>
|
|
<div>
|
|
<Label class="flex justify-center items-center my-2">{{ label }}
|
|
<SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35 data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35">
|
|
<SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]"/>
|
|
</SwitchRoot>
|
|
</Label>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { label, disabled } = defineProps<{
|
|
label?: string
|
|
disabled?: boolean
|
|
}>();
|
|
const model = defineModel<boolean>();
|
|
</script> |