[Vue] Toggle Switch 만들기 (feat. Atomic Design)

atmoic design을 도입하면서, 공용으로 사용하고 있는 component들을 새롭게 디자인하고 있습니다. 

여기에서는 vue3 + composition setup Api + typescript 로 toggle 컴포넌트를 간단히 만들어 보겠습니다.

 

완성된 모습은 아래와 같습니다.

vue3 toggle switch button

 

vue3에서 구현했으며, 구현 코드는 아래와 같습니다.

<template>
    <div class="atom">
        <label>
            <input type="checkbox" :value="modelValue" :checked="modelValue" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)">
        </label>
    </div>
</template>
<script setup lang="ts">

const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true
    }
})
const emit = defineEmits(['update:modelValue'])

</script>

<style lang=scss scoped>
label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
input[type="checkbox"] {
    --input-width: 3rem;
    --active-color: rgb(37 99 235);
    --circle-margin: 0.2rem;
    --circle-size: 1.25rem;
    cursor: pointer;
    appearance: none;
    position: relative;
    background-color: rgb(229 231 235 / 1);
    border-radius: 100em;
    width: var(--input-width);
    height: 1.5rem;
    transition-property: all;
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    &::before{
        content: "";
        position: absolute;
        left: var(--circle-margin);
        top: 50%;
        transform: translateY(-50%);
        width: var(--circle-size);
        height: var(--circle-size);
        border-radius: 50%;
        background-color: white;
        transition-property: all;
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    }

    &:checked{
        background-color: var(--active-color);
        &::before{
            left: calc(100% - var(--circle-size) - var(--circle-margin));
        }
    }
}
</style>

 

 

부모 컴포넌트에서 사용은 아래처럼 했습니다.

{{ toggleValue }}
<Switch v-model="toggleValue"/>