Menu메뉴
메뉴 컴포넌트는 세로로 배열된 옵션 집합을 제공합니다. 사용자가 버튼이나 다른 컨트롤과 상호 작용할 때 메뉴가 표시됩니다.
드롭다운 메뉴를 구현해야 하는 경우 <mdui-dropdown> 컴포넌트와 함께 사용합니다.
컴포넌트 가져오기:
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
컴포넌트의 TypeScript 타입 가져오기:
import type { Menu } from 'mdui/components/menu.js';
import type { MenuItem } from 'mdui/components/menu-item.js';
사용 예시:
Item 1
Item 2
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
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>
소스
<mdui-menu> 컴포넌트에 dense 속성을 추가하면 컴팩트 레이아웃을 구현할 수 있습니다.
Item 1
Item 2
Item 3
<mdui-menu dense>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
<mdui-menu-item>Item 3</mdui-menu-item>
</mdui-menu>
소스
<mdui-menu-item> 컴포넌트에 disabled 속성을 추가하면 메뉴 항목을 비활성화할 수 있습니다.
Item 1
Item 2
Item 3
<mdui-menu>
<mdui-menu-item disabled>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
<mdui-menu-item>Item 3</mdui-menu-item>
</mdui-menu>
소스
<mdui-menu> 컴포넌트에 selects 속성을 single로 지정하면 단일 선택 기능을 구현할 수 있습니다. 이때 <mdui-menu>의 value 값은 현재 선택된 <mdui-menu-item>의 value 값입니다.
Item 1
Item 2
<mdui-menu selects="single" value="item-2">
<mdui-menu-item value="item-1">Item 1</mdui-menu-item>
<mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-menu>
소스
<mdui-menu> 컴포넌트에 selects 속성을 multiple로 지정하면 다중 선택 기능을 구현할 수 있습니다. 이때 <mdui-menu>의 value 값은 현재 선택된 <mdui-menu-item>의 value 값으로 구성된 배열입니다.
참고: 다중 선택 모드에서는 <mdui-menu>의 value 값이 배열이므로 JavaScript 속성으로서만 값을 읽고 설정할 수 있습니다.
Item 1
Item 2
Item 3
<mdui-menu selects="multiple" class="example-multiple">
<mdui-menu-item value="item-1">Item 1</mdui-menu-item>
<mdui-menu-item value="item-2">Item 2</mdui-menu-item>
<mdui-menu-item value="item-3">Item 3</mdui-menu-item>
</mdui-menu>
<script>
// item-1과 item-2를 기본 선택으로 설정
const menu = document.querySelector(".example-multiple");
menu.value = ["item-1", "item-2"];
</script>
소스
<mdui-menu-item> 컴포넌트에서 icon 및 end-icon 속성을 설정하면 메뉴 항목의 왼쪽과 오른쪽에 각각 Material Icons 아이콘을 추가할 수 있습니다. end-text 속성을 설정하면 오른쪽에 텍스트를 추가할 수 있습니다. 또한 icon, end-icon, end-text 슬롯을 통해 메뉴 항목의 왼쪽과 오른쪽에 아이콘과 텍스트를 추가할 수 있습니다.
다른 메뉴 항목과의 정렬을 유지하기 위해 메뉴 항목 왼쪽에 아이콘 공간을 비워 두려면 icon 속성을 빈 문자열로 설정하면 됩니다.
Item 1
Item 2
Ctrl+X
Item 3
<mdui-menu>
<mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">Item 1</mdui-menu-item>
<mdui-menu-item>
Item 2
<mdui-icon slot="icon" name="visibility"></mdui-icon>
<mdui-icon slot="end-icon" name="add_circle"></mdui-icon>
<span slot="end-text">Ctrl+X</span>
</mdui-menu-item>
<mdui-menu-item icon="">Item 3</mdui-menu-item>
</mdui-menu>
소스단일 선택 또는 다중 선택 모드에서는 selected-icon 속성 또는 selected-icon 슬롯을 통해 선택 상태의 아이콘을 설정할 수 있습니다.
Item 1
Item 2
<mdui-menu selects="multiple">
<mdui-menu-item value="item-1" selected-icon="cloud_done">Item 1</mdui-menu-item>
<mdui-menu-item value="item-2">
<mdui-icon slot="selected-icon" name="done_outline"></mdui-icon>
Item 2
</mdui-menu-item>
</mdui-menu>
소스
<mdui-menu-item> 컴포넌트에 href 속성을 설정하면 메뉴 항목을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(download, target, rel)도 함께 사용합니다.
Item 1
Item 2
<mdui-menu>
<mdui-menu-item href="https://www.mdui.org" target="_blank">Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
소스
<mdui-menu-item> 컴포넌트에서 submenu 슬롯을 사용해 하위 메뉴 항목의 요소를 지정할 수 있습니다.
Line spacing
Single
1.5
Double
Custom: 1.2
Paragraph style
<mdui-menu>
<mdui-menu-item>
Line spacing
<mdui-menu-item slot="submenu">Single</mdui-menu-item>
<mdui-menu-item slot="submenu">1.5</mdui-menu-item>
<mdui-menu-item slot="submenu">Double</mdui-menu-item>
<mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
</mdui-menu-item>
<mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>
소스<mdui-menu> 컴포넌트에서 submenu-trigger 속성으로 하위 메뉴의 트리거 방식을 설정할 수 있습니다.
Line spacing
Single
1.5
Double
Custom: 1.2
Paragraph style
<mdui-menu submenu-trigger="click">
<mdui-menu-item>
Line spacing
<mdui-menu-item slot="submenu">Single</mdui-menu-item>
<mdui-menu-item slot="submenu">1.5</mdui-menu-item>
<mdui-menu-item slot="submenu">Double</mdui-menu-item>
<mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
</mdui-menu-item>
<mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>
소스submenu-trigger 속성이 hover로 설정된 경우 <mdui-menu> 컴포넌트에서 submenu-open-delay 및 submenu-close-delay 속성으로 하위 메뉴의 열기 지연 시간과 닫기 지연 시간을 설정할 수 있습니다.
Line spacing
Single
1.5
Double
Custom: 1.2
Paragraph style
<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
<mdui-menu-item>
Line spacing
<mdui-menu-item slot="submenu">Single</mdui-menu-item>
<mdui-menu-item slot="submenu">1.5</mdui-menu-item>
<mdui-menu-item slot="submenu">Double</mdui-menu-item>
<mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
</mdui-menu-item>
<mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>
소스
<mdui-menu-item> 컴포넌트에서 custom 슬롯을 사용하면 메뉴 항목의 내용을 완전히 사용자 정의할 수 있습니다.
ACOS
숫자의 아크코사인 값을 라디안 단위로 반환합니다
ACOSH
숫자의 하이퍼볼릭 아크코사인 값을 반환합니다
<style>
.custom-item {
padding: 4px 12px;
}
.custom-item .secondary {
display: none;
color: #888;
font-size: 13px;
}
.custom-item:hover .secondary {
display: block
}
</style>
<mdui-menu>
<mdui-menu-item>
<div slot="custom" class="custom-item">
<div>ABS</div>
<div class="secondary">숫자의 절대값을 반환합니다</div>
</div>
</mdui-menu-item>
<mdui-menu-item>
<div slot="custom" class="custom-item">
<div>ACOS</div>
<div class="secondary">숫자의 아크코사인 값을 라디안 단위로 반환합니다</div>
</div>
</mdui-menu-item>
<mdui-menu-item>
<div slot="custom" class="custom-item">
<div>ACOSH</div>
<div class="secondary">숫자의 하이퍼볼릭 아크코사인 값을 반환합니다</div>
</div>
</mdui-menu-item>
</mdui-menu>
소스| HTML 속성 | JavaScript 프로퍼티 | Reflect | 유형 | 기본값 |
|---|
메뉴 항목의 값입니다.
|
메뉴 항목을 비활성화할지 여부를 설정합니다.
|
왼쪽의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
왼쪽에 아이콘을 표시할 필요는 없지만 아이콘 위치를 확보해야 하는 경우 빈 문자열을 전달하여 자리를 채울 수 있습니다.
|
오른쪽의 Material Icons 아이콘 이름입니다. slot="end-icon"을 통해서도 설정할 수 있습니다.
|
오른쪽의 텍스트입니다. slot="end-text"을 통해서도 설정할 수 있습니다.
|
선택됨 상태의 Material Icons 아이콘 이름입니다. slot="selected-icon"을 통해서도 설정할 수 있습니다.
|
하위 메뉴를 열지 여부를 설정합니다.
|
링크의 대상 URL입니다.
이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
|
다운로드할 링크 대상을 지정합니다.
참고: href 속성이 지정된 경우에만 유효합니다.
|
링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:
_blank: 새 창에서 링크 열기_parent: 부모 프레임에서 링크 열기_self: 기본값. 현재 프레임에서 링크 열기_top: 전체 창에서 링크 열기
참고: href 속성이 지정된 경우에만 유효합니다.
|
현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:
alternate: 현재 문서의 대체 버전author: 현재 문서 또는 글의 작성자bookmark: 가장 가까운 상위 섹션으로의 영구 링크external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음help: 관련 도움말 문서로 링크license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공
참고: href 속성이 지정된 경우에만 사용 가능합니다.
|
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
|
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
|
| 이름 | 매개변수 | 반환값 |
|---|
마우스 클릭을 시뮬레이션합니다.
|
현재 요소에 포커스를 설정합니다.
객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:
preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
|
현재 요소에서 포커스를 제거합니다.
|
| 이름 |
|---|
포커스를 얻었을 때 발생합니다.
|
포커스를 잃었을 때 발생합니다.
|
하위 메뉴 열림이 시작될 때 발생합니다. event.preventDefault()를 호출하여 하위 메뉴 열림을 막을 수 있습니다.
|
하위 메뉴 열림 애니메이션이 완료되면 발생합니다.
|
하위 메뉴 닫힘이 시작될 때 발생합니다. event.preventDefault()를 호출하여 하위 메뉴 닫힘을 막을 수 있습니다.
|
하위 메뉴 닫힘 애니메이션이 완료되면 발생합니다.
|
| 이름 |
|---|
메뉴 항목의 텍스트
|
메뉴 항목 왼쪽 아이콘
|
메뉴 항목 오른쪽 아이콘
|
메뉴 오른쪽의 텍스트
|
선택됨 상태의 아이콘
|
하위 메뉴
|
임의의 사용자 정의 콘텐츠
|
| 이름 |
|---|
메뉴 항목의 컨테이너
|
왼쪽 아이콘
|
텍스트 콘텐츠
|
오른쪽 아이콘
|
오른쪽 텍스트
|
선택됨 상태의 아이콘
|
하위 메뉴 요소
|
| HTML 속성 | JavaScript 프로퍼티 | Reflect | 유형 | 기본값 |
|---|
메뉴 항목의 선택 가능 상태입니다. 기본값은 선택 불가입니다. 사용 가능한 값:
single: 단일 선택multiple: 다중 선택
|
현재 선택된 <mdui-menu-item>의 값입니다.
참고: 이 프로퍼티의 HTML 속성 값은 항상 문자열이며, selects="single"일 때만 HTML 속성을 통해 초기값을 설정할 수 있습니다. 이 프로퍼티의 JavaScript 프로퍼티 값은 selects="single"일 때는 문자열, selects="multiple"일 때는 문자열 배열입니다. 따라서 selects="multiple"일 때는 JavaScript 프로퍼티를 통해서만 이 값을 수정할 수 있습니다.
|
메뉴 항목에 간격이 좁은 레이아웃을 사용할지 여부를 설정합니다.
|
하위 메뉴의 트리거 방식입니다. 여러 값을 공백으로 구분하여 지정할 수 있습니다. 사용 가능한 값:
click: 메뉴 항목 클릭 시 하위 메뉴 열기hover: 메뉴 항목에 마우스 호버 시 하위 메뉴 열기focus: 메뉴 항목에 포커스 시 하위 메뉴 열기manual: 프로그래밍 방식으로만 하위 메뉴를 열고 닫을 수 있습니다. 다른 트리거 방식을 함께 지정할 수 없습니다.
|
마우스 호버로 하위 메뉴가 열리는 지연 시간(밀리초)입니다.
|
마우스 호버로 하위 메뉴가 닫히는 지연 시간(밀리초)입니다.
|
| 이름 | 매개변수 | 반환값 |
|---|
현재 요소에 포커스를 설정합니다.
|
현재 요소에서 포커스를 제거합니다.
|
| 이름 |
|---|
메뉴 항목 선택 상태가 변경될 때 발생합니다.
|
| 이름 |
|---|
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
|
다음 장
NavigationBar 내비게이션 바
