NavigationDrawer 侧边抽屉栏

侧边抽屉栏用于在页面侧边提供导航功能，使用户能够快速访问不同的页面或内容。

通常，可以在侧边抽屉栏中使用 <mdui-list> 组件来添加导航项。

使用方法

按需导入组件：

import 'mdui/components/navigation-drawer.js';

按需导入组件的 TypeScript 类型：

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

使用示例：

关闭侧边抽屉栏

打开侧边抽屉栏

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>关闭侧边抽屉栏</mdui-button>
</mdui-navigation-drawer>

<mdui-button>打开侧边抽屉栏</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

注意事项：

该组件默认使用 position: fixed 定位。

当 modal 属性为 false，且断点大于等于 --mdui-breakpoint-md 时，会自动在 body 上添加 padding-left 或 padding-right 样式，以避免页面内容被该组件遮挡。

但在以下两种情况下，会默认使用 position: absolute 定位：

contained 属性为 true 时。
当组件位于 <mdui-layout></mdui-layout> 中时。此时不会添加 padding-left 或 padding-right 样式。

示例

位于指定容器内

默认情况下，侧边抽屉栏会相对于当前窗口，在页面左侧或右侧显示。如果你希望把侧边抽屉栏放在指定容器内，可以添加 contained 属性，此时侧边抽屉栏会相对于父元素显示（你需要自行在父元素上添加样式 position: relative; overflow: hidden;）。

关闭侧边抽屉栏

打开侧边抽屉栏

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">关闭侧边抽屉栏</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">打开侧边抽屉栏</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

源码

添加 modal 属性可以在打开侧边抽屉栏时显示遮罩层。注意在窗口或父元素宽度小于 --mdui-breakpoint-md 时，会无视该参数，始终会显示遮罩层。

添加 close-on-esc 属性，可以在按下 ESC 键时关闭侧边抽屉栏。

添加 close-on-overlay-click 属性，可以在点击遮罩层时关闭侧边抽屉栏。

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">关闭侧边抽屉栏</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">打开侧边抽屉栏</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

源码

位于右侧

通过将 placement 属性设置为 right，可以将侧边抽屉栏显示在页面右侧。

关闭侧边抽屉栏

打开侧边抽屉栏

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">关闭侧边抽屉栏</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">打开侧边抽屉栏</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

源码

API

属性

HTML 属性	JavaScript 属性	类型	默认值
`open`	`open`	`boolean`	`false`
是否打开抽屉栏
`modal`	`modal`	`boolean`	`false`
抽屉栏打开时，是否显示遮罩层在窄屏设备上（屏幕宽度小于 `--mdui-breakpoint-md`），会始终显示遮罩层，无视该参数
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
在有遮罩层的情况下，按下 ESC 键是否关闭抽屉栏
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
点击遮罩层时，是否关闭抽屉栏
`placement`	`placement`	`'left' \| 'right'`	`'left'`
抽屉栏的位置。可选值包括： `left`：左侧 `right`：右侧
`contained`	`contained`	`boolean`	`false`
默认情况下，抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时，抽屉栏将相对于其父元素显示。 Note：设置该属性时，必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。
`order`	`order`	`number`	-
该组件在 `<mdui-layout>` 中的布局顺序，按从小到大排序。默认为 `0`

事件

名称
`open`
抽屉栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏打开
`opened`
抽屉栏打开动画完成之后触发
`close`
抽屉栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏关闭
`closed`
抽屉栏关闭动画完成之后触发
`overlay-click`
点击遮罩层时触发

Slots

名称
默认
抽屉栏中的内容

CSS Parts

名称
`overlay`
遮罩层
`panel`
抽屉栏容器

CSS 自定义属性

名称
`--shape-corner`
组件的圆角大小。可以指定一个具体的像素值；但更推荐引用设计令牌
`--z-index`
组件的 CSS `z-index` 值

NavigationBar 底部导航栏

NavigationRail 侧边导航栏