Dropdown

Basic

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

vue

<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>

Props

이름	타입	기본값	설명
items	`Array<TOption>`	(필수)	드롭다운에 표시할 항목 목록
v-model / selected-value	`string \| number \| boolean \| null`	`null`	선택된 값(양방향 바인딩)
placeholder	`string`	`''`	선택된 값이 없을 때 표시할 텍스트
size	`'large'` \| `'medium'` \| `'small'`	`'medium'`	드롭다운 버튼 및 목록의 크기
dropdown-type	`'contained'` \| `'outlined'`	`'outlined'`	드롭다운 스타일
menu-type	`'default'` \| `'checkbox'` \| `'radio'`	`'default'`	메뉴 컨테이너 타입
disabled	`boolean`	`false`	비활성화 여부
visible-rows	`number`	`9.35`	표시할 최대 행 개수(스크롤 발생)
overlay-style	`Partial<CSSStyleDeclaration>`	-	드롭다운 팝업(리스트) 영역에 적용할 인라인 스타일 객체
close-when-position-changed	`boolean`	`false`	버튼 위치 변경 시 자동으로 닫힘
z-index-key	`'toast'` \| `'tooltip'` \| `'menu'` \| `'dialog'` \| `'modal'` \| `'drawer'` \| `'mask'`	`'menu'`	팝업 레이어의 z-index 그룹 키
label-tooltip-placement	`'top'` \| `'top-left'` \| `'top-right'` \| `'bottom'` \| `'bottom-left'` \| `'bottom-right'` \| `'left'` \| `'right'` \| `'left-top'` \| `'left-bottom'` \| `'right-top'` \| `'right-bottom'`	-	드롭다운 라벨에 표시할 툴팁의 위치 (설정 시 툴팁 활성화)

metrics

아이템이 많은 드롭다운에서 선택된 아이템이 하단에 위치한 경우, 드롭다운을 열 때 해당 아이템으로 자동 스크롤됩니다.

vue

<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <dropdown class="w-80" v-model="selectedMetric" :items="metrics" />
</template>

Type (contained)

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

vue

<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 입니다.

vue

<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

vue

<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과 결합하여 사용할 수 있습니다.

vue

<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과 결합하여 사용할 수 있습니다.

labelTooltipPlacement

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

vue

<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 / selected-value	string \| number	-	선택된 값(양방향 바인딩 지원)
placeholder	string	''	선택된 값이 없을 때 표시할 텍스트
size	'large' \| 'medium' \| 'small'	'medium'	드롭다운 버튼 및 목록의 크기
dropdown-type	'contained' \| 'outlined'	'outlined'	드롭다운 스타일
menu-type	'default' \| 'checkbox' \| 'radio' (SingleMenuType)	'default'	메뉴 컨테이너 타입
disabled	boolean	false	비활성화 여부
visible-rows	number	9.35	표시할 최대 행 개수(스크롤 발생)
overlay-style	`Partial<CSSStyleDeclaration>`	-	드롭다운 팝업(리스트) 영역에 적용할 인라인 스타일 객체
close-when-position-changed	boolean	false	버튼 위치 변경 시 자동으로 닫힘
z-index-key	'toast' \| 'tooltip' \| 'menu' \| 'dialog' \| 'modal' \| 'drawer' \| 'mask'	'menu'	팝업 레이어의 z-index 그룹 키
label-tooltip-placement	'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는 테두리 스타일입니다.
visible-rows: 목록의 최대 표시 행 수를 지정하면, 초과 시 스크롤이 생깁니다.
overlayStyle: 드롭다운 팝업(리스트) 영역에 인라인 스타일을 직접 지정할 수 있습니다.

Dropdown ​

Basic ​

Props ​

metrics ​

Type (contained) ​

Size (large, medium, small) ​

disabled ​

고정 (badge, icon) ​

선택된 Item (badge, icon) ​

labelTooltipPlacement ​

지원하는 placement 값 ​

API ​

슬롯 ​

이벤트 ​

상세 설명 ​