ToggleSwitch

ToggleSwitch는 단일 항목의 상태를 켜거나 끕니다.

Basic

<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch } from '@jennifersoft/vue-components-v2';
const checked = ref(false);
</script>
<template>
    <toggle-switch v-model="checked" />
</template>

Size

<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch } from '@jennifersoft/vue-components-v2';
const checkedSize1 = ref(false);
const checkedSize2 = ref(false);
const checkedSize3 = ref(false);
</script>
<template>
    <toggle-switch size="large" v-model="checkedSize1" />
    <toggle-switch size="medium" v-model="checkedSize2" />
    <toggle-switch size="small" v-model="checkedSize3" />
</template>

Disabled

Off

On

<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch } from '@jennifersoft/vue-components-v2';
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(true);
const checked4 = ref(true);
</script>
<template>
    <div class="flex flex-col gap-2">
        <div class="flex items-center h-12">
            <label class="w-16 font-bold">Off</label>
            <toggle-switch v-model="checked1" />
            <toggle-switch :disabled="true" v-model="checked2" />
        </div>
        <div class="flex items-center h-12">
            <label class="w-16 font-bold">On</label>
            <toggle-switch v-model="checked3" />
            <toggle-switch :disabled="true" v-model="checked4" />
        </div>
    </div>
</template>

Icon

<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch, ICON_TYPE } from '@jennifersoft/vue-components-v2';
const iconChecked1 = ref(false);
const iconChecked2 = ref(false);
const iconChecked3 = ref(false);
</script>
<template>
    <toggle-switch
        size="large"
        :on-icon="ICON_TYPE.lock"
        :off-icon="ICON_TYPE.unlock"
        v-model="iconChecked1"
    />
    <toggle-switch
        size="medium"
        :on-icon="ICON_TYPE.lock"
        :off-icon="ICON_TYPE.unlock"
        v-model="iconChecked2"
    />
    <toggle-switch
        size="small"
        :on-icon="ICON_TYPE.lock"
        :off-icon="ICON_TYPE.unlock"
        v-model="iconChecked3"
    />
</template>

Colors

<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch, ICON_TYPE } from '@jennifersoft/vue-components-v2';
const colorChecked1 = ref(true);
const colorChecked2 = ref(true);
const colorChecked3 = ref(true);
</script>
<template>
    <toggle-switch
        size="medium"
        v-model="colorChecked1"
        :style="{ '--custom-switch-color': '#92D8FF' }"
    />
    <toggle-switch
        size="medium"
        v-model="colorChecked2"
        :style="{ '--custom-switch-color': '#40CE7C' }"
    />
    <toggle-switch
        size="medium"
        v-model="colorChecked3"
        :style="{ '--custom-switch-color': '##9668FD' }"
    />
</template>