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

Question

我正在使用 Menu with icons 组件。点击按钮(即菜单)。菜单项(即 mat-menu 项)显示在按钮上方，如图所示下图。

我希望元素(例如注销)显示在菜单按钮下方。我尝试赋予 ma​​rgin 和 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 .