閱讀(4.6k) 書簽贊(0) 我要糾錯

抽屜式導(dǎo)航

2018-05-26 00:36 更新

MDUI 中的抽屜式導(dǎo)航欄（后面簡稱抽屜欄）可以從頁面左側(cè)或右側(cè)滑出，一個頁面可以擁有多個抽屜欄。

抽屜欄在手機、平板、桌面設(shè)備上的表現(xiàn)有些不同，你可以通過改變?yōu)g覽器寬度來觀察本頁面左側(cè)的抽屜欄的變化：

高度

在手機和平板上，抽屜欄的高度始終為 100%。
在桌面設(shè)備上，抽屜欄默認不覆蓋應(yīng)用欄，距離頁面頂部有一個應(yīng)用欄的高度。添加類 .mdui-drawer-full-height 可以使抽屜欄高度為 100%。

背景色和陰影

在手機和平板上，抽屜欄默認為白色背景，有陰影。
在桌面設(shè)備上，抽屜欄默認為透明背景，沒有陰影。添加類 .mdui-color-[color] 可以設(shè)置抽屜欄的背景色，并添加陰影。

顯示狀態(tài)

在手機和平板上，抽屜欄默認隱藏。
在桌面設(shè)備上，抽屜欄默認顯示。
添加類 .mdui-drawer-open 可以使抽屜欄在所有設(shè)備上都默認顯示；添加類 .mdui-drawer-close 可以使抽屜欄在所有設(shè)備上都默認隱藏。

遮罩

在手機和平板上，打開抽屜欄時，始終會顯示遮罩層。
在桌面設(shè)備上，打開抽屜欄時，默認不顯示遮罩層。設(shè)置 overlay 參數(shù)為 true，可以在打開抽屜欄時顯示遮罩層。如果設(shè)置為顯示遮罩層，那么應(yīng)該添加 .mdui-drawer-close 類使抽屜欄默認處于隱藏狀態(tài)。

調(diào)用方式

通過自定義屬性調(diào)用
通過 JavaScript 調(diào)用

調(diào)用方式

HTML 結(jié)構(gòu)

<!-- mdui-drawer-body-left 類為 body 添加 padding-left，只要左側(cè)有默認打開的抽屜欄，就要添加這個類。 -->
<!-- mdui-drawer-body-right 類為 body 添加 padding-right，只要右側(cè)有默認打開的抽屜欄，就要添加這個類。 -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- 默認抽屜欄在左側(cè) -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>
  
  <!-- 如果要使抽屜欄在右側(cè)，需要添加類 mdui-drawer-right -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>
  
</body>

通過自定義屬性調(diào)用

使用該方式無需編寫 JavaScript 代碼。只需在一個起控制作用的元素（例如：按鈕）上添加 mdui-drawer="options" 屬性即可。通過自定義屬性調(diào)用時，需要額外添加一個 target 參數(shù)，用于指定被控制的抽屜欄，它的值為被控制的抽屜欄的 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>

在抽屜欄內(nèi)的元素上可以添加一些屬性來綁定事件，這些屬性在使用 JavaScript 調(diào)用方式時也可以使用。

屬性	說明
mdui-drawer-close	點擊該元素會觸發(fā) close.mdui.drawer 事件，并關(guān)閉抽屜欄。

通過 JavaScript 調(diào)用

// selector 為抽屜欄的 CSS 選擇器或 DOM 元素
// options 為配置參數(shù)，見下面的參數(shù)列表
var inst = new mdui.Drawer(selector, options);

在線運行

參數(shù)

參數(shù)名	類型	默認值	描述
overlay	boolean	false	打開抽屜欄時是否顯示遮罩層。該參數(shù)只對中等屏幕及以上的設(shè)備有效，在超小屏和小屏設(shè)備上始終會顯示遮罩層。

方法

方法名	描述
open	顯示抽屜欄。
close	隱藏抽屜欄。
toggle	切換抽屜欄的顯示狀態(tài)。
getState	返回當(dāng)前抽屜欄的狀態(tài)。共包含四種狀態(tài)（opening、opened、closing、closed）。

事件

事件	描述	目標	參數(shù)
open.mdui.drawer	抽屜欄開始打開動畫時，事件將被觸發(fā)。	<div class="mdui-drawer"></div>	event.detail.inst：實例
opened.mdui.drawer	抽屜欄完成打開動畫時，事件將被觸發(fā)。	<div class="mdui-drawer"></div>	event.detail.inst：實例
close.mdui.drawer	抽屜欄開始關(guān)閉動畫時，事件將被觸發(fā)。	<div class="mdui-drawer"></div>	event.detail.inst：實例
closed.mdui.drawer	抽屜欄完成關(guān)閉動畫時，事件將被觸發(fā)。	<div class="mdui-drawer"></div>	event.detail.inst：實例

CSS 類名列表

類名	效果
.mdui-drawer	定義一個抽屜欄。
.mdui-drawer-right	在頁面右側(cè)的抽屜欄。
.mdui-drawer-full-height	使抽屜欄占據(jù) 100% 高度。
.mdui-drawer-open	使抽屜欄默認處于顯示狀態(tài)。
.mdui-drawer-close	使抽屜欄默認處于隱藏狀態(tài)。
.mdui-drawer-body-left	為 body 添加 padding-left
.mdui-drawer-body-right	為 body 添加 padding-right