menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 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 调用

调用方式

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 返回当前抽屉栏的状态。共包含四种状态(openingopenedclosingclosed)。

事件

事件描述目标参数
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-leftbody 添加 padding-left
.mdui-drawer-body-rightbody 添加 padding-right