Skip to main content

Menu

MSK Menu는 행 작업, 더보기, 계정 메뉴처럼 버튼에서 열리는 명령 목록입니다. 작은 설정 패널은 popover, 명령 목록은 menu로 구분합니다.

Preview​

명령을 선택하세요.

Data API​

<button type="button" data-msk-menu-target="#row-actions">
  작업
</button>

<div id="row-actions" data-msk-menu hidden>
  <button type="button">편집</button>
  <button type="button">복제</button>
  <button type="button">삭제</button>
</div>

JavaScript API​

window.MSK.ui.menu.open(button);
window.MSK.ui.menu.close();
window.MSK.ui.menu.toggle(button);

Accessibility​

  • Trigger는 aria-haspopup="menu"와 aria-expanded를 사용합니다.
  • Menu item은 기본 role="menuitem"로 준비됩니다.
  • Escape, outside click, ArrowUp, ArrowDown, Home, End를 지원합니다.