123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
modelValue: boolean
|
|
id: string
|
|
name?: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const checked = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<label :for="id" class="toggle">
|
|
<div class="toggle__label">
|
|
<slot name="off"></slot>
|
|
</div>
|
|
<div class="toggle__input">
|
|
<input type="checkbox" :name="name" :id="id" v-model="checked" />
|
|
<div class="toggle__inner"></div>
|
|
</div>
|
|
<div class="toggle__label">
|
|
<slot name="on"></slot>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.toggle {
|
|
font-family: 'apple color emoji', 'noto color emoji', 'segoe ui emoji', 'android emoji',
|
|
'emojisymbols', 'emojione mozilla', 'twemoji mozilla', 'segoe ui symbol';
|
|
|
|
padding: 0.5em;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
&__label,
|
|
&__toggle {
|
|
flex: 0 1 auto;
|
|
align-self: center;
|
|
line-height: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
&__input {
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
&__input input:checked + &__inner {
|
|
background-color: var(--color-toggle);
|
|
|
|
&:before {
|
|
transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0);
|
|
}
|
|
|
|
&:after {
|
|
transform: translate3d(1.1em, 0.1em, 0);
|
|
}
|
|
}
|
|
|
|
&__inner {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 2.3em;
|
|
height: 1.3em;
|
|
background-color: #e6e6e6;
|
|
border-radius: 1.15em;
|
|
vertical-align: text-bottom;
|
|
transition: all 0.3s linear;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
height: 1.1em;
|
|
background-color: #fff;
|
|
border-radius: 0.55em;
|
|
}
|
|
|
|
&:before {
|
|
width: 2.1em;
|
|
transform: translate3d(0.1em, 0.1em, 0) scale3d(1, 1, 1);
|
|
transition: all 0.25s linear;
|
|
}
|
|
|
|
&:after {
|
|
width: 1.1em;
|
|
box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.24);
|
|
transform: translate3d(0.1em, 0.1em, 0);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
}
|
|
|
|
input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:active &__inner:after {
|
|
width: 1.4em;
|
|
transform: translate3d(0.1em, 0.1em, 0);
|
|
}
|
|
|
|
&:active input:checked + &__inner:after {
|
|
transform: translate3d(0.8em, 0.1em, 0);
|
|
}
|
|
}
|
|
</style>
|