UI 가이드

다크 모드

ScMultiDropdown ​

ScMultiDropdown은 다중 선택이 가능한 드롭다운 컴포넌트입니다.
문자열 배열 또는 객체 배열을 받아 사용자 정의 라벨, 검색, 비활성화, 다중 출력 등 다양한 기능을 지원합니다.

✅ 기본 사용법 ​

규칙, Red
규칙 외 1건
규칙, Red
규칙, Red
규칙, Red
결과 : [ "규칙", "Red" ]
vue
<div class="w-[200px]">
  <sc-multi-dropdown :items="simpleItems" v-model="simpleValue" @change="onChange" />
</div>
<div class="w-[200px] mt-5">
  <sc-multi-dropdown :items="simpleItems" v-model="simpleValue" multi-label />
</div>
<div class="w-[200px] mt-5">
  <sc-multi-dropdown :items="simpleItems" v-model="simpleValue" disabled />
</div>

<div class="w-[200px] mt-5">
  <sc-multi-dropdown
    :items="simpleItems"
    v-model="simpleValue"
    size="medium"
    placeholder="Select!"
  />
</div>
<div class="w-[200px] mt-5">
  <sc-multi-dropdown :items="simpleItems" v-model="simpleValue" size="medium" disabled />
</div>
<div class="mt-5 text-sm">결과 : {{ simpleValue }}</div>

<script setup>
import { ref } from 'vue';

const simpleItems = ref(['규정', '규칙', 'Red', 'Blue', 'White-breasted Wood swallow', 'Black', 'Grey']);
const simpleValue = ref(['규칙', 'Red']);
</script>

✨ 사용 예시 모음 ​

▸ item 항목이 Object 형태인 경우 ​

items의 키 값인 value와 라벨 값인 text로 select 영역을 만듭니다.

Magpie Goose, Little Kingfisher
Magpie Goose 외 1건
결과 : [ "MAG", "LIT" ]
vue
<div class="w-[200px]">
  <sc-multi-dropdown :items="items" v-model="value" @change="onChange" />
</div>

<div class="w-[200px] mt-5">
  <sc-multi-dropdown :items="items" v-model="value" @change="onChange" multi-label />
</div>

<div class="mt-5 text-sm">결과 : {{ value }}</div>

<script setup>
const items = ref([
  { value: 'COC', text: 'Cockatoo' },
  { value: 'MAG', text: 'Magpie Goose' },
  { value: 'LIT', text: 'Little Kingfisher' },
  { value: 'RIC', text: 'Richards Pipit' },
]);

const value = ref(['MAG', 'LIT']);

function onChange(val) {
  console.info('onChange', val);
}
</script>

▸ item의 Custom Key 사용 ​

기본 키값이 아닌 custom 하게 Object의 키 값을 지정할 수 있습니다. 아래 예제는 Key 값은 code 라벨 값은 name 으로 지정했습니다.

선택
선택
결과 : []
vue
<div class="w-[200px]">
  <sc-multi-dropdown
    :items="items2"
    v-model="value2"
    item-value="code"
    item-text="name"
    @change="onChange"
  />
</div>

<div class="w-[200px] mt-5">
  <sc-multi-dropdown
    :items="items2"
    v-model="value2"
    item-value="code"
    item-text="name"
    @change="onChange"
    multi-label
  />
</div>

<div class="mt-5 text-sm">결과 : {{ value2 }}</div>

<script setup>
const items2 = ref([
  { code: 'A', name: 'A CODE' },
  { code: 'B', name: 'B CODE' },
  { code: 'C', name: 'C CODE' },
]);
const value2 = ref([]);
</script>

▸ searchable ​

:searchable - 선택 가능한 항목을 검색 가능

- 키보드 Up, Down과 Enter를 이용 하여 선택 가능

- 검색어를 입력하여 조건이 한개인 경우 Enter를 입력하면 선택

선택
결과 : []
vue
<div class="w-[150px]">
  <sc-multi-dropdown :items="simpleItems" v-model="value3" @change="onChange" searchable />
</div>

<div class="mt-5 text-sm">결과 : {{ value3 }}</div>

🛠️ 속성 (Props) ​

이름타입기본값설명
itemsArray[]선택 가능한 항목 목록 (문자열 또는 객체 배열)
modelValueArray[]현재 선택된 값 (v-model)
placeholderstring''기본 안내 문구
disabledbooleanfalse비활성화 여부
heightnumber200드롭다운 레이어 최대 높이(px)
multiLabelbooleanfalse여러 항목 선택 시 라벨들을 모두 표시
searchablebooleanfalse검색 입력 필드 활성화
borderlessbooleanfalse외곽선 없는 스타일 적용
sizestring'medium'사이즈 (small, medium)

📤 이벤트 (Emits) ​

이벤트 이름설명
update:modelValue선택된 값이 바뀔 때 발생
change선택 상태가 변경될 때

🔳 슬롯 (Slots) ​

해당 컴포넌트는 기본적으로 슬롯을 사용하지 않습니다.

🎨 스타일 클래스 ​

클래스 이름설명
sc-multi-dropdown드롭다운 컨테이너
.disabled비활성화 상태 스타일
.invalid유효성 검증 실패 상태
.sc-item각 항목 클래스
.search-input검색 입력 필드
.rotate-180화살표 아이콘 회전 (열림 시)

📝 기타 참고사항 ​

  • items 배열은 단순 문자열 또는 { value, text } 형태 모두 지원합니다.
  • 검색 기능(searchable)을 활성화하면 텍스트 필드가 자동 표시됩니다.
  • 내부적으로 ScCheckbox를 사용하여 항목 선택을 구성합니다.