셀렉트 크기
다양한 크기의 셀렉트 필드입니다.
#select #size
도움말
도움말
도움말
HTML
<div class="fieldset">
<div class="form-group">
<div class="form-tit">
<label for="select_size_small">레이블</label>
</div>
<div class="form-conts">
<select id="select_size_small" class="krds-form-select large" title="선택">
<option value="" selected>large</option>
<option value="">medium</option>
<option value="">small</option>
</select>
</div>
<p class="form-hint">도움말</p>
</div>
<div class="form-group">
<div class="form-tit">
<label for="select_size_medium">레이블</label>
</div>
<div class="form-conts">
<select id="select_size_medium" class="krds-form-select medium" title="선택">
<option value="">large</option>
<option value="" selected>medium</option>
<option value="">small</option>
</select>
</div>
<p class="form-hint">도움말</p>
</div>
<div class="form-group">
<div class="form-tit">
<label for="select_size_large">레이블</label>
</div>
<div class="form-conts">
<select id="select_size_large" class="krds-form-select small" title="선택">
<option value="">large</option>
<option value="">medium</option>
<option value="" selected>small</option>
</select>
</div>
<p class="form-hint">도움말</p>
</div>
</div>Vue 컴포넌트
<template>
<div class="fieldset">
<div class="form-group">
<div class="form-tit">
<label for="select_size_small">레이블</label>
</div>
<div class="form-conts">
<select id="select_size_small" class="krds-form-select large" title="선택">
<option value="" selected>large</option>
<option value="">medium</option>
<option value="">small</option>
</select>
</div>
<p class="form-hint">도움말</p>
</div>
<div class="form-group">
<div class="form-tit">
<label for="select_size_medium">레이블</label>
</div>
<div class="form-conts">
<select id="select_size_medium" class="krds-form-select medium" title="선택">
<option value="">large</option>
<option value="" selected>medium</option>
<option value="">small</option>
</select>
</div>
<p class="form-hint">도움말</p>
</div>
<div class="form-group">
<div class="form-tit">
<label for="select_size_large">레이블</label>
</div>
<div class="form-conts">
<select id="select_size_large" class="krds-form-select small" title="선택">
<option value="">large</option>
<option value="">medium</option>
<option value="" selected>small</option>
</select>
</div>
<p class="form-hint">도움말</p>
</div>
</div>
</template>
<script setup lang="ts">
// 셀렉트 크기 컴포넌트
// 다양한 크기의 셀렉트 필드입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- select_size.html
- 카테고리
- 폼
- 난이도
- 쉬움