Dropdown드롭다운
드롭다운 컴포넌트는 팝업되는 컨트롤에 특정 콘텐츠를 표시하는 데 사용되며, 일반적으로 메뉴 컴포넌트와 함께 사용됩니다.
컴포넌트 가져오기:
import 'mdui/components/dropdown.js';
컴포넌트의 TypeScript 타입 가져오기:
import type { Dropdown } from 'mdui/components/dropdown.js';
사용 예시:
open dropdown
Item 1
Item 2
<mdui-dropdown>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
disabled 속성을 추가하면 드롭다운 컴포넌트를 비활성화할 수 있습니다.
open dropdown
Item 1
Item 2
<mdui-dropdown disabled>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
소스
placement 속성을 사용해 드롭다운 컴포넌트의 열림 위치를 설정할 수 있습니다.
open dropdown
Item 1
Item 2
<mdui-dropdown placement="right-start">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
소스
trigger 속성을 사용해 드롭다운 컴포넌트의 트리거 방식을 설정할 수 있습니다.
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="hover">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
소스
open-on-pointer 속성을 추가하면 커서 위치에서 드롭다운 컴포넌트가 열립니다. 일반적으로 trigger="contextmenu"와 함께 사용하여 마우스 오른쪽 버튼으로 메뉴를 엽니다.
이 영역에서 마우스 오른쪽 버튼을 사용해 메뉴 열기
Item 1
Item 2
<mdui-dropdown trigger="contextmenu" open-on-pointer>
<mdui-card slot="trigger" style="width:100%;height: 80px">이 영역에서 마우스 오른쪽 버튼을 사용해 메뉴 열기</mdui-card>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
소스
드롭다운에서 메뉴를 사용할 때 기본적으로 메뉴 항목을 클릭하면 드롭다운 컴포넌트가 자동으로 닫힙니다. stay-open-on-click 속성을 추가하면 메뉴 항목 클릭 시 드롭다운 컴포넌트의 열린 상태를 유지할 수 있습니다.
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="click" stay-open-on-click>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
소스
trigger="hover"로 설정된 경우 open-delay, close-delay 속성으로 열기 및 닫기 지연 시간을 설정할 수 있습니다.
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
소스| HTML 속성 | JavaScript 프로퍼티 | Reflect | 유형 | 기본값 |
|---|
open | open | | boolean | false |
드롭다운을 열지 여부를 설정합니다.
|
disabled | disabled | | boolean | false |
드롭다운을 비활성화할지 여부를 설정합니다.
|
trigger | trigger | | 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string | 'click' |
드롭다운의 트리거 방식입니다. 여러 값을 공백으로 구분하여 지정할 수 있습니다. 사용 가능한 값:
click: 클릭 시 트리거hover: 마우스 호버 시 트리거focus: 포커스 시 트리거contextmenu: 마우스 오른쪽 버튼 클릭 또는 터치 길게 누르기 시 트리거manual: 프로그래밍 방식으로만 드롭다운을 열고 닫을 수 있습니다. 다른 트리거 방식을 함께 지정할 수 없습니다.
|
placement | placement | | 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'auto' |
드롭다운 콘텐츠의 위치입니다. 사용 가능한 값:
auto: 위치 자동 판단top-start: 상단 왼쪽 정렬top: 상단 중앙 정렬top-end: 상단 오른쪽 정렬bottom-start: 하단 왼쪽 정렬bottom: 하단 중앙 정렬bottom-end: 하단 오른쪽 정렬left-start: 왼쪽 상단 정렬left: 왼쪽 중앙 정렬left-end: 왼쪽 하단 정렬right-start: 오른쪽 상단 정렬right: 오른쪽 중앙 정렬right-end: 오른쪽 하단 정렬
|
stay-open-on-click | stayOpenOnClick | | boolean | false |
<mdui-menu-item> 클릭 후 드롭다운이 열린 상태를 유지할지 여부를 설정합니다.
|
open-delay | openDelay | | number | 150 |
마우스 호버로 드롭다운이 열리는 지연 시간(밀리초)입니다.
|
close-delay | closeDelay | | number | 150 |
마우스 호버로 드롭다운이 닫히는 지연 시간(밀리초)입니다.
|
open-on-pointer | openOnPointer | | boolean | false |
드롭다운을 트리거한 커서 위치에서 드롭다운을 열지 여부를 설정합니다. 주로 마우스 오른쪽 버튼 메뉴를 열 때 사용합니다.
|
| 이름 |
|---|
open |
드롭다운 열림이 시작될 때 발생합니다. event.preventDefault()를 호출하여 드롭다운 열림을 막을 수 있습니다.
|
opened |
드롭다운 열림 애니메이션이 완료되면 발생합니다.
|
close |
드롭다운 닫힘이 시작될 때 발생합니다. event.preventDefault()를 호출하여 드롭다운 닫힘을 막을 수 있습니다.
|
closed |
드롭다운 닫힘 애니메이션이 완료되면 발생합니다.
|
| 이름 |
|---|
trigger |
드롭다운을 트리거하는 요소의 컨테이너, 즉 trigger slot의 컨테이너입니다.
|
panel |
드롭다운 콘텐츠의 컨테이너
|
