抽屉式导航
2018-05-26 00:36 更新
MDUI 中的抽屉式导航栏（后面简称抽屉栏）可以从页面左侧或右侧滑出，一个页面可以拥有多个抽屉栏。
抽屉栏在手机、平板、桌面设备上的表现有些不同，你可以通过改变浏览器宽度来观察本页面左侧的抽屉栏的变化：
高度
- 在手机和平板上，抽屉栏的高度始终为 100%。
- 在桌面设备上，抽屉栏默认不覆盖应用栏，距离页面顶部有一个应用栏的高度。添加类 .mdui-drawer-full-height 可以使抽屉栏高度为 100%。
背景色和阴影
- 在手机和平板上，抽屉栏默认为白色背景，有阴影。
- 在桌面设备上，抽屉栏默认为透明背景，没有阴影。添加类 .mdui-color-[color] 可以设置抽屉栏的背景色，并添加阴影。
显示状态
- 在手机和平板上，抽屉栏默认隐藏。
- 在桌面设备上，抽屉栏默认显示。
- 添加类 .mdui-drawer-open 可以使抽屉栏在所有设备上都默认显示；添加类 .mdui-drawer-close 可以使抽屉栏在所有设备上都默认隐藏。
遮罩
- 在手机和平板上，打开抽屉栏时，始终会显示遮罩层。
- 在桌面设备上，打开抽屉栏时，默认不显示遮罩层。设置 overlay 参数为 true，可以在打开抽屉栏时显示遮罩层。如果设置为显示遮罩层，那么应该添加 .mdui-drawer-close 类使抽屉栏默认处于隐藏状态。
调用方式
- 通过自定义属性调用
- 通过 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 | 打开抽屉栏时是否显示遮罩层。该参数只对中等屏幕及以上的设备有效，在超小屏和小屏设备上始终会显示遮罩层。 |
方法
| 方法名 | 描述 |
| open | 显示抽屉栏。 |
| close | 隐藏抽屉栏。 |
| toggle | 切换抽屉栏的显示状态。 |
| getState | 返回当前抽屉栏的状态。共包含四种状态（opening、opened、closing、closed）。 |
事件
| 事件 | 描述 | 目标 | 参数 |
| open.mdui.drawer | 抽屉栏开始打开动画时，事件将被触发。 | <div class="mdui-drawer"></div> | event.detail.inst：实例 |
| opened.mdui.drawer | 抽屉栏完成打开动画时，事件将被触发。 | <div class="mdui-drawer"></div> | event.detail.inst：实例 |
| close.mdui.drawer | 抽屉栏开始关闭动画时，事件将被触发。 | <div class="mdui-drawer"></div> | event.detail.inst：实例 |
| closed.mdui.drawer | 抽屉栏完成关闭动画时，事件将被触发。 | <div class="mdui-drawer"></div> | event.detail.inst：实例 |
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 |
以上内容是否对您有帮助：
← 应用栏
更多建议：