menuMDUI文件
color_lens
基於 Material Design 3 與 Web Components 的全新 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-left為 body 加入 padding-left。
.mdui-drawer-body-right為 body 加入 padding-right。
arrow_backPrevious
應用程式列
arrow_forwardNext
底部導覽列