在mat-menu按钮下方显示mat菜单项

Question

我正在使用Menu with icons组件。点击按钮（i，e菜单）。菜单项（i，e mat-menu items）显示在按钮上方，如下图所示。

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

这是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上阅读更多相关信息。