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-leftpadding-right 样式,以避免页面内容被该组件遮挡。

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

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

示例

位于指定容器内

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

模态化

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

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

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

位于右侧

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

API

属性

HTML 属性JavaScript 属性Reflect类型默认值
openopenbooleanfalse

是否打开抽屉栏

modalmodalbooleanfalse

抽屉栏打开时,是否显示遮罩层

在窄屏设备上(屏幕宽度小于 --mdui-breakpoint-md),会始终显示遮罩层,无视该参数

close-on-esccloseOnEscbooleanfalse

在有遮罩层的情况下,按下 ESC 键是否关闭抽屉栏

close-on-overlay-clickcloseOnOverlayClickbooleanfalse

点击遮罩层时,是否关闭抽屉栏

placementplacement'left' | 'right''left'

抽屉栏的位置。可选值包括:

  • left:左侧
  • right:右侧
containedcontainedbooleanfalse

默认情况下,抽屉栏相对于 body 元素显示。当该参数设置为 true 时,抽屉栏将相对于其父元素显示。

Note:设置该属性时,必须在父元素上手动设置样式 position: relative; overflow: hidden;

orderordernumber-

该组件在 <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

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库