NavigationDrawer내비게이션 드로어

내비게이션 드로어는 페이지 측면에 탐색 기능을 제공하여 사용자가 다양한 페이지나 콘텐츠에 빠르게 접근할 수 있도록 합니다.

일반적으로 내비게이션 드로어 내에서 <mdui-list> 컴포넌트를 사용해 탐색 항목을 추가할 수 있습니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/navigation-drawer.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

사용 예시:

내비게이션 드로어 닫기

내비게이션 드로어 열기

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>내비게이션 드로어 닫기</mdui-button>
</mdui-navigation-drawer>

<mdui-button>내비게이션 드로어 열기</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

주의 사항:

이 컴포넌트는 기본적으로 position: fixed 위치 지정을 사용합니다.

modal 속성이 false이고 브레이크포인트가 --mdui-breakpoint-md 이상일 때, 페이지 내용이 이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 body에 padding-left 또는 padding-right 스타일을 추가합니다.

하지만 다음 두 가지 경우에는 기본적으로 position: absolute 위치 지정을 사용합니다:

contained 속성이 true인 경우.
컴포넌트가 <mdui-layout></mdui-layout> 내에 위치한 경우. 이 경우 padding-left 또는 padding-right 스타일이 추가되지 않습니다.

기본적으로 내비게이션 드로어는 현재 창을 기준으로 페이지 왼쪽 또는 오른쪽에 표시됩니다. 내비게이션 드로어를 지정된 컨테이너 안에 넣으려면 contained 속성을 추가합니다. 이 경우 내비게이션 드로어는 부모 요소를 기준으로 표시됩니다(부모 요소에 position: relative; overflow: hidden; 스타일을 직접 추가해야 합니다).

내비게이션 드로어 닫기

내비게이션 드로어 열기

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">내비게이션 드로어 닫기</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">내비게이션 드로어 열기</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

소스

modal 속성을 추가하면 내비게이션 드로어를 열 때 오버레이 레이어가 표시됩니다. 창이나 부모 요소의 너비가 --mdui-breakpoint-md 미만일 때는 이 매개변수와 관계없이 항상 오버레이 레이어가 표시됩니다.

close-on-esc 속성을 추가하면 ESC 키를 누를 때 내비게이션 드로어가 닫힙니다.

close-on-overlay-click 속성을 추가하면 오버레이 레이어를 클릭할 때 내비게이션 드로어가 닫힙니다.

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">내비게이션 드로어 닫기</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">내비게이션 드로어 열기</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

소스

오른쪽에 위치시키기

placement 속성을 right로 설정하면 내비게이션 드로어를 페이지 오른쪽에 표시할 수 있습니다.

내비게이션 드로어 닫기

내비게이션 드로어 열기

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">내비게이션 드로어 닫기</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">내비게이션 드로어 열기</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`open`	`open`	`boolean`	`false`
내비게이션 드로어를 열지 여부를 설정합니다.
`modal`	`modal`	`boolean`	`false`
내비게이션 드로어가 열릴 때 오버레이를 표시할지 여부를 설정합니다. 좁은 화면 기기(화면 너비가 `--mdui-breakpoint-md` 미만)에서는 이 매개변수와 관계없이 항상 오버레이가 표시됩니다.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
오버레이가 있는 경우 ESC 키를 눌러 내비게이션 드로어를 닫을지 여부를 설정합니다.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
오버레이 클릭 시 내비게이션 드로어를 닫을지 여부를 설정합니다.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
내비게이션 드로어의 위치입니다. 사용 가능한 값: `left`: 왼쪽 `right`: 오른쪽
`contained`	`contained`	`boolean`	`false`
기본적으로 내비게이션 드로어는 `body` 요소를 기준으로 표시됩니다. 이 속성이 `true`로 설정되면 내비게이션 드로어는 상위 요소를 기준으로 표시됩니다. 참고: 이 속성을 설정할 때는 상위 요소에 `position: relative; overflow: hidden;` 스타일을 수동으로 설정해야 합니다.
`order`	`order`	`number`	-
`<mdui-layout>` 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 `0`입니다.

이벤트

이름
`open`
내비게이션 드로어가 열리기 전에 발생합니다. `event.preventDefault()`를 호출하여 내비게이션 드로어 열림을 막을 수 있습니다.
`opened`
내비게이션 드로어 열림 애니메이션이 완료되면 발생합니다.
`close`
내비게이션 드로어가 닫히기 전에 발생합니다. `event.preventDefault()`를 호출하여 내비게이션 드로어 닫힘을 막을 수 있습니다.
`closed`
내비게이션 드로어 닫힘 애니메이션이 완료되면 발생합니다.
`overlay-click`
오버레이를 클릭할 때 발생합니다.

Slots

이름
기본
내비게이션 드로어의 콘텐츠

CSS Parts

이름
`overlay`
오버레이
`panel`
내비게이션 드로어 컨테이너

CSS 사용자 정의 속성

이름
`--shape-corner`
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
`--z-index`
컴포넌트의 CSS `z-index` 값

이전 장

NavigationBar 내비게이션 바

다음 장

NavigationRail 내비게이션 레일