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

Question

我正在使用Menu with iconscomponent.Here单击按钮（i，e菜单）。菜单项（i，e菜单项）显示在按钮上方，如下图所示。

我希望项目（ex注销）显示在菜单按钮下方。我试图给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>

叉式堆叠闪电战的完整示例

您可以在此处阅读有关它的更多信息。