Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<script setup lang="ts">
import { useVModel } from '@vueuse/core';
interface Props {
isActive: boolean;
size?: 'large' | 'extraLarge';
color?: string;
}
const props = defineProps<Props>();
const emit = defineEmits(['update:isActive']);
const isActive = useVModel(props, 'isActive', emit);
</script>
<template>
<button
:style="`background-color: ${color ?? '#0ea5e9'}`"
:class="[
'switcher',
{
largeSwitcher: size === 'large',
extraLargeSwitcher: size === 'extraLarge',
activeSwitcher: isActive
}
]"
@click.prevent="isActive = !isActive"
>
<div
:class="[
'switcherCircle',
{
largeSwitcherCircle: size === 'large',
extraLargeSwitcherCircle: size === 'extraLarge',
activeSwitcherCircle: isActive
}
]"
></div>
</button>
</template>
<style scoped>
.switcher {
display: flex;
justify-content: start;
width: 30px;
height: 18px;
padding: 2px;
border-radius: 9px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.switcher:hover {
filter: brightness(90%);
}
.activeSwitcher {
justify-content: end;
background-color: black !important;
}
.largeSwitcher {
width: 35px;
height: 21px;
border-radius: 11px;
}
.extraLargeSwitcher {
width: 40px;
height: 24px;
border-radius: 12px;
}
.switcherCircle {
width: 14px;
height: 14px;
background-color: white;
border-radius: 50%;
float: left;
transition: all 0.2s ease-in-out;
}
.activeSwitcherCircle {
float: right;
}
.largeSwitcherCircle {
width: 17px;
height: 17px;
}
.extraLargeSwitcherCircle {
width: 20px;
height: 20px;
}
</style>