Last active
January 3, 2024 21:53
-
-
Save idesignzone/0285d62724409b884cb94c445bfe6302 to your computer and use it in GitHub Desktop.
Headless UI Switch reusable component for Vue and Nuxt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<SwitchGroup as="div" class="flex items-center"> | |
<Switch | |
:modelValue="modelValue" | |
@update:modelValue="(newValue) => $emit('update:modelValue', newValue)" | |
:class="[ | |
modelValue ? 'bg-indigo-500' : 'bg-gray-200 dark:bg-gray-800', | |
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-none', | |
]"> | |
<span | |
aria-hidden="true" | |
:class="[ | |
modelValue ? 'translate-x-5 rtl:-translate-x-5' : 'translate-x-0', | |
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-gray-900 shadow ring-0 transition duration-200 ease-in-out', | |
]" /> | |
</Switch> | |
<SwitchLabel as="span" class="ml-3 text-sm"> | |
<span v-html="text" class="font-medium text-gray-900 dark:text-gray-200"> | |
</span> | |
</SwitchLabel> | |
</SwitchGroup> | |
</template> | |
<script setup> | |
defineProps(["modelValue", "required", "disabled", "text"]); | |
const emit = defineEmits(["update:modelValue"]); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment