Dropdown

Basic

Dropdown은 선택한 아이템의 양방향 바인딩을 위해 v-model 로 함께 사용됩니다. 선택된 값이 없다면 placeholder의 내용이 표시됩니다. Dropdown을 선택하면 Menu 가 표시됩니다.

Select a item

<script setup lang="ts">
import { ref } from 'vue';
import { Dropdown } from '@jennifersoft/vue-components-v2';

const selectedItemValue = ref();
const items1 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2, tooltip: { text: '기본 툴팁 예시입니다.' } },
    {
        label: 'Three',
        value: 3,
        tooltip: {
            text: '툴팁 위치를 지정할 수 있습니다.',
            placement: 'right',
        },
    },
    {
        label: 'Four',
        value: 4,
        tooltip: {
            text: '툴팁의 최대 너비를 지정할 수 있습니다. 내용이 길어지면 자동으로 줄바꿈됩니다.',
            maxWidth: 200,
        },
    },
    {
        label: 'Five',
        value: 5,
        tooltip: {
            text: '툴팁 스타일을 직접 지정할 수 있습니다.',
            overlayStyle: { color: 'skyblue' },
        },
    },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown
        class="w-40"
        v-model="selectedItemValue"
        :items="items1"
        placeholder="Select a item"
    />
</template>

Type (contained)

Contained 타입은 입력 컨테이너에 테두리 및 배경색이 없으며 상태에 따라 배경색이 나타납니다. Outlined 타입은 입력 컨테이너에 테두리가 있으며 테두리 옵션을 변경할 수 있습니다.

Select a item

<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';

const items2 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown
        class="w-40"
        :items="items2"
        dropdown-type="contained"
        placeholder="Select a item"
    />
</template>

Size (large, medium, small)

사이즈는 (large, medium, small) 3가지가 있습니다. 디폴트 사이즈는 medium 입니다.

large

medium

small

<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';

const items3 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown class="w-40" :items="items3" size="large" placeholder="large" />
    <dropdown class="w-40" :items="items3" size="medium" placeholder="medium" />
    <dropdown class="w-40" :items="items3" size="small" placeholder="small" />
</template>

disabled

disabled

contained

<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';

const items4 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown
        class="w-40"
        :items="items4"
        :disabled="true"
        placeholder="disabled"
    />
    <dropdown
        class="w-40"
        :items="items4"
        :disabled="true"
        dropdown-type="contained"
        placeholder="contained"
    />
</template>

고정 (badge, icon)

고정된 badge, icon과 결합하여 사용할 수 있습니다.

5m

Select a item

Select a item

5m

<script setup lang="ts">
import { Dropdown, ICON_TYPE, SvgIcon } from '@jennifersoft/vue-components-v2';

const items5 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown class="w-56" :items="items5" placeholder="Select a item">
        <template v-slot:left>
            <svg-icon :icon="ICON_TYPE.search" />
            <badge :text="'5m'" />
        </template>
    </dropdown>
    <dropdown class="w-56" :items="items5" placeholder="Select a item">
        <template v-slot:right>
            <badge :text="'5m'" />
        </template>
    </dropdown>
</template>

선택된 Item (badge, icon)

선택된 Item의 badge, icon과 결합하여 사용할 수 있습니다.

Select a item

labelTooltipPlacement

labelTooltipPlacement prop을 설정하면 드롭다운 라벨에 마우스를 올렸을 때 툴팁이 표시됩니다. 선택된 항목의 전체 텍스트나 placeholder를 툴팁으로 확인할 수 있습니다.

Select item

<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';
const simpleItems = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <!-- 툴팁이 아래쪽에 표시 -->
    <dropdown
        class="w-40"
        :items="simpleItems"
        placeholder="Select item"
        label-tooltip-placement="bottom-left"
    />
</template>

지원하는 placement 값

• top, top-left, top-right
• bottom, bottom-left, bottom-right
• left, left-top, left-bottom
• right, right-top, right-bottom

API

이름	타입	기본값	설명
items	Array<{ label: string, value: string|number, leadingIcon?: IconTypes, leadingBadge?: BadgeProps, tooltip?: TooltipProps }>	(필수)	드롭다운에 표시할 항목 목록
v-model / selectedValue	string | number	-	선택된 값(양방향 바인딩 지원)
placeholder	string	''	선택된 값이 없을 때 표시할 텍스트
size	'large' | 'medium' | 'small'	'medium'	드롭다운 버튼 및 목록의 크기
dropdown-type	'contained' | 'outlined'	'outlined'	드롭다운 스타일
disabled	boolean	false	비활성화 여부
displayRowCount	number	-	표시할 최대 행 개수(스크롤 발생)
overlayStyle	Partial<CSSStyleDeclaration>	-	드롭다운 팝업(리스트) 영역에 적용할 인라인 스타일 객체
labelTooltipPlacement	'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom'	-	드롭다운 라벨에 표시할 툴팁의 위치 (설정 시 툴팁 활성화)

슬롯

• left: 버튼 왼쪽에 아이콘, 뱃지 등 커스텀 요소를 넣을 수 있습니다.
• right: 버튼 오른쪽에 커스텀 요소를 넣을 수 있습니다.

이벤트

• @onchange: 항목을 선택했을 때 선택된 item 객체를 반환합니다.
• @unfold: 드롭다운이 열리거나 닫힐 때(열림 여부 boolean 반환)

상세 설명

• items: { label, value } 형태의 객체 배열이어야 하며, value와 label은 필수입니다.
• v-model/selectedValue: 선택된 값을 바인딩합니다. 값이 없으면 placeholder가 표시됩니다.
• size: 드롭다운의 크기를 지정합니다. (large, medium, small)
• dropdown-type: 스타일을 지정합니다. contained는 배경색, outlined는 테두리 스타일입니다.
• displayRowCount: 목록의 최대 표시 행 수를 지정하면, 초과 시 스크롤이 생깁니다.
• overlayStyle: 드롭다운 팝업(리스트) 영역에 인라인 스타일을 직접 지정할 수 있습니다.