본문으로 건너뛰기

Command Palette

MSK Command는 ⌘K / Ctrl+K 명령 팔레트 primitive입니다. 입력으로 항목을 필터링하고 키보드로 실행합니다. (아래 미리보기는 오버레이 없이 패널만 표시합니다.)

Preview​

  • 설정
  • 새 프로젝트
  • 멤버 초대
  • 로그아웃

Data API​

<button type="button" data-msk-command-trigger="#palette">검색 (⌘K)</button>

<div id="palette" data-msk-command data-msk-command-hotkey="true" hidden>
  <div data-msk-command-panel>
    <input type="text" data-msk-command-input placeholder="명령 입력">
    <ul data-msk-command-list>
      <li data-msk-command-item data-keywords="설정 환경">설정</li>
      <li data-msk-command-item data-value="logout">로그아웃</li>
    </ul>
    <div data-msk-command-empty hidden>결과 없음</div>
  </div>
</div>

JavaScript API​

window.MSK.ui.command.open(document.querySelector('#palette'));
window.MSK.ui.command.close(root);

Events​

root.addEventListener('msk:command-select', (event) => {
  runCommand(event.detail.value);
});

Accessibility​

  • 목록은 role="listbox", 항목은 role="option". ↑/↓ 이동, Enter 실행, Esc/배경 클릭으로 닫기.
  • data-msk-command-hotkey="true"이면 ⌘K / Ctrl+K 전역 단축키가 활성화됩니다.
  • 항목 텍스트와 data-keywords를 함께 검색합니다.