menuMDUI문서
color_lens
머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

내비게이션 드로어

mdui의 내비게이션 드로어는 페이지의 왼쪽이나 오른쪽에서 슬라이드하여 나타나며, 한 페이지에 여러 개의 내비게이션 드로어를 가질 수 있습니다.

내비게이션 드로어는 모바일, 태블릿, 데스크톱 기기에서 조금씩 다르게 동작합니다. 브라우저 너비를 조절하여 이 페이지 왼쪽의 내비게이션 드로어 변화를 관찰할 수 있습니다:

  1. 높이
    • 모바일 및 태블릿에서는 내비게이션 드로어의 높이가 항상 100%입니다.
    • 데스크톱 기기에서는 내비게이션 드로어가 기본적으로 앱 바를 덮지 않으며, 페이지 상단에서 앱 바 높이만큼 떨어져 있습니다. .mdui-drawer-full-height 클래스를 추가하면 내비게이션 드로어 높이를 100%로 만들 수 있으며, 이때 내비게이션 드로어가 앱 바 위에 겹칠 수 있습니다. 앱 바에 .mdui-appbar-inset 클래스를 추가하면 내비게이션 드로어에 의해 앱 바가 가려지지 않도록 할 수 있습니다.
  2. 배경색 및 그림자
    • 모바일 및 태블릿에서 내비게이션 드로어는 기본적으로 흰색 배경에 그림자가 있습니다.
    • 데스크톱 기기에서 내비게이션 드로어는 기본적으로 투명한 배경에 그림자가 없습니다. .mdui-color-[color] 클래스를 추가하여 내비게이션 드로어의 배경색을 설정하고 그림자를 추가할 수 있습니다.
  3. 표시 상태
    • 모바일 및 태블릿에서 내비게이션 드로어는 기본적으로 숨겨져 있습니다.
    • 데스크톱 기기에서 내비게이션 드로어는 기본적으로 표시됩니다.
    • .mdui-drawer-open 클래스를 추가하면 모든 기기에서 내비게이션 드로어가 기본적으로 표시되도록 할 수 있으며, .mdui-drawer-close 클래스를 추가하면 모든 기기에서 기본적으로 숨겨지도록 할 수 있습니다.
  4. 오버레이
    • 모바일 및 태블릿에서는 내비게이션 드로어를 열 때 항상 오버레이(차단막)가 표시됩니다.
    • 데스크톱 기기에서는 내비게이션 드로어를 열 때 기본적으로 오버레이가 표시되지 않습니다. overlay 매개변수를 true로 설정하면 내비게이션 드로어를 열 때 오버레이를 표시할 수 있습니다. 오버레이를 표시하도록 설정한 경우, .mdui-drawer-close 클래스를 추가하여 내비게이션 드로어가 기본적으로 숨겨진 상태가 되도록 해야 합니다.

호출 방식

  1. (컴포넌트가 동적으로 생성된 경우 mdui.mutation()을 호출하여 초기화해야 합니다.)
  2. JavaScript를 통한 호출

관련 읽기

Material Design 가이드라인: 패턴 - 내비게이션 드로어

호출 방식

HTML 구조

<!-- mdui-drawer-body-left 클래스는 body에 padding-left를 추가합니다. 왼쪽에 기본적으로 열려 있는 내비게이션 드로어가 있는 경우 이 클래스를 추가해야 합니다. -->
<!-- mdui-drawer-body-right 클래스는 body에 padding-right를 추가합니다. 오른쪽에 기본적으로 열려 있는 내비게이션 드로어가 있는 경우 이 클래스를 추가해야 합니다. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- 기본 내비게이션 드로어 위치는 왼쪽입니다. -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- 내비게이션 드로어를 오른쪽에 배치하려면 mdui-drawer-right 클래스를 추가해야 합니다. -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

사용자 정의 속성을 통한 호출

이 방식은 JavaScript 코드를 작성할 필요가 없습니다. 제어 역할을 하는 요소(예: 버튼)에 mdui-drawer="options" 속성을 추가하기만 하면 됩니다. 사용자 정의 속성을 통해 호출할 때는 제어할 내비게이션 드로어를 지정하기 위해 target 매개변수를 추가해야 하며, 그 값은 제어할 내비게이션 드로어의 CSS 선택자입니다.

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

내비게이션 드로어 내부의 요소에 특정 속성을 추가하여 이벤트를 바인딩할 수 있으며, 이 속성들은 JavaScript 호출 방식에서도 사용할 수 있습니다.

속성설명
mdui-drawer-close이 요소를 클릭하면 close.mdui.drawer 이벤트가 발생하고 내비게이션 드로어가 닫힙니다.

JavaScript를 통한 호출

// selector는 내비게이션 드로어의 CSS 선택자 또는 DOM 요소입니다.
// options는 구성 매개변수이며 아래의 매개변수 목록을 참조하세요.
var inst = new mdui.Drawer(selector, options);
실행

매개변수

매개변수 이름유형기본값설명
overlaybooleanfalse내비게이션 드로어를 열 때 오버레이를 표시할지 여부입니다. 이 매개변수는 중간 화면 이상의 기기에서만 유효하며, 아주 작은 화면과 작은 화면 기기에서는 항상 오버레이가 표시됩니다.
swipebooleanfalse스와이프 제스처 활성화 여부입니다.

메서드

메서드 이름설명
open내비게이션 드로어를 엽니다.
close내비게이션 드로어를 숨깁니다.
toggle내비게이션 드로어의 표시 상태를 전환합니다.
getState현재 내비게이션 드로어의 상태를 반환합니다. 네 가지 상태(opening, opened, closing, closed)가 포함됩니다.

이벤트

이벤트 이름설명대상매개변수
open.mdui.drawer내비게이션 드로어가 열기 애니메이션을 시작할 때 이벤트가 발생합니다.<div class="mdui-drawer"></div>event._detail.inst: 인스턴스
opened.mdui.drawer내비게이션 드로어가 열기 애니메이션을 완료했을 때 이벤트가 발생합니다.
close.mdui.drawer내비게이션 드로어가 닫기 애니메이션을 시작할 때 이벤트가 발생합니다.
closed.mdui.drawer내비게이션 드로어가 닫기 애니메이션을 완료했을 때 이벤트가 발생합니다.

CSS 클래스 목록

클래스 이름설명
.mdui-drawer내비게이션 드로어를 정의합니다.
.mdui-drawer-right페이지 오른쪽에 위치하는 내비게이션 드로어입니다.
.mdui-drawer-full-height내비게이션 드로어가 100% 높이를 차지하게 합니다.
.mdui-drawer-open내비게이션 드로어를 기본적으로 표시 상태로 만듭니다.
.mdui-drawer-close내비게이션 드로어를 기본적으로 숨김 상태로 만듭니다.
.mdui-drawer-body-leftbody에 padding-left를 추가합니다.
.mdui-drawer-body-rightbody에 padding-right를 추가합니다.
arrow_backPrevious
앱 바
arrow_forwardNext
하단 내비게이션 바