토글 스위치 크기
다양한 크기의 토글 스위치입니다.
#toggle #size
HTML
<div class="krds-form-toggle-switch large">
<input type="checkbox" id="switch_lg_1">
<label for="switch_lg_1"><span class="switch-toggle"><i></i></span>switch size : large</label>
</div>
<div class="krds-form-toggle-switch medium">
<input type="checkbox" id="switch_lg_md">
<label for="switch_lg_md"><span class="switch-toggle"><i></i></span>switch size : medium</label>
</div>Vue 컴포넌트
<template>
<div class="krds-form-toggle-switch large">
<input type="checkbox" id="switch_lg_1">
<label for="switch_lg_1"><span class="switch-toggle"><i></i></span>switch size : large</label>
</div>
<div class="krds-form-toggle-switch medium">
<input type="checkbox" id="switch_lg_md">
<label for="switch_lg_md"><span class="switch-toggle"><i></i></span>switch size : medium</label>
</div>
</template>
<script setup lang="ts">
// 토글 스위치 크기 컴포넌트
// 다양한 크기의 토글 스위치입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- toggle_switch_size.html
- 카테고리
- 유틸리티
- 난이도
- 쉬움