Angular Material 菜单栏

菜单栏是一个水平条，由操作系统 GUI 和其他应用程序中的菜单标签组成。要在 Angular Material 中创建菜单，使用 md-menubar 容器组件，该组件包含多个菜单。

Angular 中的菜单项

在 Angular 应用程序中实现菜单项的步骤如下

步骤 1：导入 Angular Material Menu 模块

我们可以在 app.components.ts 文件或 app.module.ts 文件中导入 material menu 模块 (MatMenuModule)，以便在整个应用程序中使用。

步骤 2：使用 mat Menu 选择器显示菜单项

在组件文件中导入 MatMenuModule 后，使用 mat-menu 选择器，它是一个包含菜单选项列表的浮动面板。

向引用菜单面板的 mat-menu 添加模板引用变量。

步骤 3：添加 matMenuTriggerFor 元素

UI 中的 mat-menu 元素不呈现任何内容。

菜单必须与一个触发元素关联，该元素使用 matMenuTriggerFor 指令打开和关闭菜单。

在上面的示例中，我们通过 matMenuTriggerFor 属性将 mat-menu 容器附加到“Simple Menu”按钮。

更改 mat Menu 位置

默认情况下，material 菜单将显示在菜单触发元素下方。

要更改菜单位置，我们使用 mat-menu 选择器的 xPosition 和 yPosition 属性。

mat-Menu 位置之前或之后

如果要显示菜单触发元素之前和之后的菜单，我们可以将 xPosition 值作为“before”或“after”传递。

xPosition 属性更改水平轴上的菜单位置。

Mat Menu 位置之上或之下

要将菜单位置显示在菜单触发元素上方，请将 yPosition 属性设置为 above。 它用于更改垂直轴上的菜单位置。 它接受值 above 或 below。

带有图标的 Mat Menu

我们通过放置 mat-icon 元素在菜单项文本之前显示 material 图标。

示例

下面的示例显示了 md-menu-bar 指令的使用以及 menu-bar 的使用。

app.component.html

输出