19 lines
709 B
Vue
19 lines
709 B
Vue
<script setup lang="ts">
|
|
|
|
const modelValue = defineModel({ default: false });
|
|
</script>
|
|
|
|
<template>
|
|
<label class="flex items-center relative w-max cursor-pointer select-none">
|
|
<input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full" v-model="modelValue" />
|
|
<span class="absolute font-medium text-xs right-1"> Buy </span>
|
|
<span class="absolute font-medium text-xs right-8"> Sell </span>
|
|
<span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-slate-100" />
|
|
</label>
|
|
</template>
|
|
|
|
<style scoped lang="postcss">
|
|
input:checked ~ span:last-child {
|
|
--tw-translate-x: 1.75rem;
|
|
}
|
|
</style> |