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` 時，抽屜導覽列將相對於其父元素顯示。 Note：設定該屬性時，必須在父元素上手動設定樣式 `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 側邊導覽列