抽屉式导航栏 - MDUI 开发文档, Material Design 前端框架

MDUI 中的抽屉式导航栏（后面简称抽屉栏）可以从页面左侧或右侧滑出，一个页面可以拥有多个抽屉栏。

抽屉栏在手机、平板、桌面设备上的表现有些不同，你可以通过改变浏览器宽度来观察本页面左侧的抽屉栏的变化：

高度
- 在手机和平板上，抽屉栏的高度始终为 100%。
- 在桌面设备上，抽屉栏默认不覆盖应用栏，距离页面顶部有一个应用栏的高度。添加类 .mdui-drawer-full-height 可以使抽屉栏高度为 100%，这时抽屉栏可能会覆盖在应用栏上方，可以在应用栏上添加类 .mdui-appbar-inset 使应用栏不被抽屉栏覆盖。
背景色和阴影
- 在手机和平板上，抽屉栏默认为白色背景，有阴影。
- 在桌面设备上，抽屉栏默认为透明背景，没有阴影。添加类 .mdui-color-[color] 可以设置抽屉栏的背景色，并添加阴影。
显示状态
- 在手机和平板上，抽屉栏默认隐藏。
- 在桌面设备上，抽屉栏默认显示。
- 添加类 .mdui-drawer-open 可以使抽屉栏在所有设备上都默认显示；添加类 .mdui-drawer-close 可以使抽屉栏在所有设备上都默认隐藏。
遮罩
- 在手机和平板上，打开抽屉栏时，始终会显示遮罩层。
- 在桌面设备上，打开抽屉栏时，默认不显示遮罩层。设置 overlay 参数为 true，可以在打开抽屉栏时显示遮罩层。如果设置为显示遮罩层，那么应该添加 .mdui-drawer-close 类使抽屉栏默认处于隐藏状态。

调用方式

通过自定义属性调用（若组件是动态生成的，则需要调用 mdui.mutation() 进行初始化）
通过 JavaScript 调用

调用方式

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);

运行

参数

参数名	类型	默认值	描述
`overlay`	`boolean`	`false`	打开抽屉栏时是否显示遮罩层。该参数只对中等屏幕及以上的设备有效，在超小屏和小屏设备上始终会显示遮罩层。
`swipe`	`boolean`	`false`	是否启用滑动手势。

方法

方法名	描述
`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`

抽屉式导航

调用方式

相关阅读

调用方式

HTML 结构

通过自定义属性调用

通过 JavaScript 调用

参数

方法

事件

CSS 类名列表