Drawer

MSK Drawer는 모바일 내비게이션, 필터, 보조 설정처럼 화면 측면에서 들어오는 패널입니다. 주 흐름을 완전히 막는 큰 폼은 modal, 보조 패널은 drawer로 구분합니다.

Preview

Data API

<button type="button" data-msk-drawer-target="#filters">
  필터
</button>

<aside id="filters" data-msk-drawer hidden>
  <div class="msk-ui-drawer__header">
    <h2 class="msk-ui-drawer__title">필터</h2>
    <button type="button" class="msk-ui-drawer__close" data-msk-drawer-close>×</button>
  </div>
  <div class="msk-ui-drawer__body">필터 내용</div>
</aside>

JavaScript API

window.MSK.ui.drawer.open(document.querySelector('#filters'));
window.MSK.ui.drawer.close(document.querySelector('#filters'));

Options

속성	설명
data-msk-drawer-side="left"	왼쪽에서 열기
data-msk-drawer-side="right"	오른쪽에서 열기, 기본값

Drawer는 열릴 때 body scroll을 잠그고, 닫힐 때 opener focus를 복원합니다.