调用方式
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 事件,并关闭抽屉栏。 |