在“ mat-menu”按钮下方显示mat-menu项目

Question

我正在使用Menu with icons组件。在这里单击按钮（即菜单）。菜单项（即菜单项）显示在按钮上方，如下图所示。

我希望项目（例如注销）显示在菜单按钮下方。我尝试提供 margin 和 padding 属性仍然没有结果。

这是stackblitz链接。

Answer 1

如果只想防止菜单本身的触发器重叠，则mat-menu为此具有一个自定义属性。它称为overlapTrigger，如果将其设置为false，则菜单项不会与触发器（帐户图标）重叠。请参见下面的示例代码：

<mat-menu #menu="matMenu" [overlapTrigger]="false">
   <button mat-menu-item>
       <mat-icon>power_settings_new</mat-icon>
       <span>Logout</span>
   </button>
</mat-menu>

位于forked stackblitz的完整示例

您可以在here上详细了解它。