Menu 菜单

菜单组件提供了一系列垂直排列的选项。

如果你需要实现下拉菜单,可以配合 <mdui-dropdown> 组件。

使用方法

按需导入组件:

import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';

按需导入组件的 TypeScript 类型:

import type { Menu } from 'mdui/components/menu.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

使用示例:

Item 1 Item 2
<mdui-menu>
  <mdui-menu-item>Item 1</mdui-menu-item>
  <mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>

示例

下拉菜单

配合 <mdui-dropdown> 组件实现下拉菜单。

紧凑布局

<mdui-menu> 组件上添加 dense 属性,可以实现紧凑布局。

禁用菜单项

<mdui-menu-item> 组件上添加 disabled 属性,可以禁用菜单项。

支持单选

<mdui-menu> 组件上指定 selects 属性为 single,可以实现单选功能。此时 <mdui-menu>value 值即为当前选中的 <mdui-menu-item>value 值。

支持多选

<mdui-menu> 组件上指定 selects 属性为 multiple,可以实现多选功能。此时 <mdui-menu>value 值即为当前选中的 <mdui-menu-item>value 值组成的数组。

注意:在多选模式下,<mdui-menu>value 值为数组,只能通过 JavaScript 属性来读取和设置该值。

图标

<mdui-menu-item> 组件上,通过设置 iconend-icon 属性,可以分别在菜单项的左侧和右侧添加 Material Icons 图标。通过设置 end-text 属性,可以在右侧添加文本。此外,也可以通过 iconend-iconend-text slot 在菜单项的左侧和右侧添加图标和文本。

如果需要在菜单项左侧空出一个图标的位置以保持与其他菜单项的对齐,可以将 icon 属性设置为空字符串。

在单选或多选模式下,可以通过 selected-icon 属性或 selected-icon slot 设置选中状态的图标。

<mdui-menu-item> 组件上设置 href 属性,可以将菜单项转换为链接。此时,还可以使用与链接相关的属性,如:downloadtargetrel

子菜单

<mdui-menu-item> 组件中,可以使用 submenu slot 来指定子菜单项的元素。

<mdui-menu> 组件上,可以通过 submenu-trigger 属性设置子菜单的触发方式。

submenu-trigger 属性设置为 hover 时,可以在 <mdui-menu> 组件上通过 submenu-open-delaysubmenu-close-delay 属性设置子菜单的打开延时和关闭延时。

自定义内容

<mdui-menu-item> 组件中,你可以使用 custom slot 来完全自定义菜单项的内容。

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

菜单项的可选状态。默认不可选。可选值包括:

  • single:单选
  • multiple:多选

当前选中的 <mdui-menu-item> 的值。

Note:该属性的 HTML 属性始终为字符串,仅在 selects="single" 时可通过 HTML 属性设置初始值;该属性的 JavaScript 属性值在 selects="single" 时为字符串,在 selects="multiple" 时为字符串数组。因此,在 selects="multiple" 时,若要修改该值,只能通过修改 JavaScript 属性值实现。

菜单项是否使用紧凑布局

子菜单的触发方式,支持多个值,用空格分隔。可选值包括:

  • click:点击菜单项时打开子菜单
  • hover:鼠标悬浮到菜单项上时打开子菜单
  • focus:聚焦到菜单项上时打开子菜单
  • manual:仅能通过编程方式打开和关闭子菜单,不能再指定其他触发方式

鼠标悬浮触发子菜单打开的延时,单位毫秒

鼠标悬浮触发子菜单关闭的延时,单位毫秒

名称参数返回值

将焦点设置在当前元素上

从当前元素中移除焦点

名称

菜单项选中状态变化时触发

名称

子菜单项(<mdui-menu-item>)、分割线(<mdui-divider>)等元素

名称

组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

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

菜单项的值

是否禁用菜单项

左侧的 Material Icons 图标名。也可以通过 slot="icon" 设置

如果左侧不需要显示图标,但需要预留一个图标的位置,可传入空字符串进行占位

右侧的 Material Icons 图标名。也可以通过 slot="end-icon" 设置

右侧的文本。也可以通过 slot="end-text" 设置

选中状态的 Material Icons 图标名。也可以通过 slot="selected-icon" 设置

是否打开子菜单

链接的目标 URL。

如果设置了此属性,组件内部将渲染为 <a> 元素,并可以使用链接相关的属性。

下载链接的目标。

Note:仅在设置了 href 属性时,此属性才有效。

链接的打开方式。可选值包括:

  • _blank:在新窗口中打开链接
  • _parent:在父框架中打开链接
  • _self:默认。在当前框架中打开链接
  • _top:在整个窗口中打开链接

Note:仅在设置了 href 属性时,此属性才有效。

当前文档与被链接文档之间的关系。可选值包括:

  • alternate:当前文档的替代版本
  • author:当前文档或文章的作者
  • bookmark:永久链接到最近的祖先章节
  • external:引用的文档与当前文档不在同一站点
  • help:链接到相关的帮助文档
  • license:当前文档的主要内容由被引用文件的版权许可覆盖
  • me:当前文档代表链接内容的所有者
  • next:当前文档是系列中的一部分,被引用的文档是系列的下一个文档
  • nofollow:当前文档的作者或发布者不认可被引用的文件
  • noreferrer:不包含 Referer 头。类似于 noopener 的效果
  • opener:如果超链接会创建一个顶级浏览上下文(即 target 属性值为 _blank),则创建一个辅助浏览上下文
  • prev:当前文档是系列的一部分,被引用的文档是系列的上一个文档
  • search:提供一个资源链接,可用于搜索当前文件及其相关页面
  • tag:提供一个适用于当前文档的标签(由给定地址识别)

Note:仅在指定了 href 属性时可用。

是否在页面加载完成后自动获取焦点

元素在使用 Tab 键切换焦点时的顺序

名称参数返回值

模拟鼠标点击元素

将焦点设置到当前元素。

可以传入一个对象作为参数,该对象的属性包括:

  • preventScroll:默认情况下,元素获取焦点后,页面会滚动以将该元素滚动到视图中。如果不希望页面滚动,可以将此属性设置为 true

移除当前元素的焦点

名称

获得焦点时触发

失去焦点时触发

子菜单开始打开时,事件被触发。可以通过调用 event.preventDefault() 阻止子菜单打开

子菜单打开动画完成时,事件被触发

子菜单开始关闭时,事件被触发。可以通过调用 event.preventDefault() 阻止子菜单关闭

子菜单关闭动画完成时,事件被触发

名称

菜单项的文本

菜单项左侧图标

菜单项右侧图标

菜单右侧的文本

选中状态的图标

子菜单

任意自定义内容

名称

菜单项的容器

左侧的图标

文本内容

右侧的图标

右侧的文本

选中状态的图标

子菜单元素

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 图标组件库