mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-05 17:22:28 +08:00
29 lines
636 B
Vue
29 lines
636 B
Vue
|
<template>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
role="switch"
|
||
|
|
:aria-checked="modelValue"
|
||
|
|
:class="[
|
||
|
|
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
|
||
|
|
modelValue ? 'bg-primary' : 'bg-muted'
|
||
|
|
]"
|
||
|
|
@click="$emit('update:modelValue', !modelValue)"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
:class="[
|
||
|
|
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
|
||
|
|
modelValue ? 'translate-x-6' : 'translate-x-1'
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
modelValue: boolean
|
||
|
|
}>()
|
||
|
|
|
||
|
|
defineEmits<{
|
||
|
|
'update:modelValue': [value: boolean]
|
||
|
|
}>()
|
||
|
|
</script>
|