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

Question

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

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

这是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>

分叉 stackblitz 的完整示例

您可以在此处阅读更多相关信息。