96 lines
1.6 KiB
Vue
96 lines
1.6 KiB
Vue
<script setup>
|
|
defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const toggle = (event) => {
|
|
emit('update:modelValue', event.target.checked)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<label class="switch-container">
|
|
<span v-if="label" class="custom-label label-text flex1">{{ label }}</span>
|
|
|
|
<input
|
|
type="checkbox"
|
|
:name="name"
|
|
:checked="modelValue"
|
|
@change="toggle"
|
|
>
|
|
|
|
<span class="slider"></span>
|
|
</label>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.flex1 {
|
|
flex: 1;
|
|
}
|
|
.switch-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* ocultar input */
|
|
.switch-container input {
|
|
display: none;
|
|
}
|
|
|
|
/* fondo del switch */
|
|
.slider {
|
|
position: relative;
|
|
width: 45px;
|
|
height: 25px;
|
|
background-color: #ccc;
|
|
border-radius: 25px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* circulo */
|
|
.slider::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
left: 4px;
|
|
top: 3.5px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* estado activo */
|
|
input:checked + .slider {
|
|
background-color: #5A67DD; /* tu color */
|
|
}
|
|
|
|
input:checked + .slider::before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
/* hover */
|
|
.switch-container:hover .slider {
|
|
opacity: 0.8;
|
|
}
|
|
</style> |