Angular Material 菜单

<mat-menu> 是一个包含选项列表的临时面板。它用于创建菜单，并与控件以及内容设计、样式和动画功能交互。

<mat-menu> 元素本身不代表任何东西。菜单通过应用 matMenuTriggerFor 指令来附加和打开。

该菜单公开了一个 API，用于以编程方式打开/关闭。请注意，在这种情况下，需要 matMenuTriggerFor 指令将菜单附加到 DOM 中的触发元素。

图标

菜单在菜单项文本之前显示 mat-icon 元素。

自定义菜单位置

默认情况下，菜单将 (y 轴) 在 (x 轴) 之后显示，而不会与其触发器重叠。可以使用 xPosition (before | after) 和 yPosition (up | down) 属性更改位置。使用 overlapTrigger 属性，可以强制菜单与触发器重叠。

嵌套菜单

内容支持 matte-menu-item 打开子菜单的功能。为此，我们需要定义我们的根菜单和子菜单，此外还需要在触发子菜单的 mat-menu-item 上设置 [matMenuTriggerFor]

延迟渲染

默认情况下，菜单内容将在面板关闭时初始化。为了推迟初始化，内容可以作为 N-template 提供，直到 matmenucontent 打开。

将数据传递到菜单

使用延迟渲染时，可以通过 matMenuTriggerData 输入将其他引用数据传递给菜单面板。它允许为单个菜单实例提供不同的数据，具体取决于打开它的触发器

键盘交互

• DOWN_ARROW：它将焦点移动到下一个菜单项
• UP_ARROW：它将焦点移动到上一个菜单项
• RIGHT_ARROW：它打开菜单项的子菜单
• LEFT_ARROW：它关闭当前菜单，它是一个子菜单
• ENTER：它激活选中的菜单项
• ESCAPE：Escape 关闭菜单

可访问性

没有文本或标签的菜单触发器和菜单项已通过 aria-label 和 aria-labelledby 提供了有意义的标签。

示例 1

app.component.html

app.component.ts

输出

示例 2

已修改模块描述符 app.module.ts。

以下是修改后的 HTML 主机文件 app.component.html 的内容。

输出

说明

我们使用 mat-menu 创建了两个菜单，然后使用 matMenuTriggerFor 将它们绑定到按钮。 MatMenuTriggerFor 传递菜单标识符以附加菜单。