html - 无法使用 Angular Material 菜单加载按钮下的选项列表

Question

我正在使用 Angular Material 设计，当我点击菜单按钮时，选项显示在按钮的顶部。

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>

如何在按钮下方显示选项，如下图所示

Answer 1

您可以将 mat-menu 的 overlapTrigger 属性设置为 false，以便在触发器下方显示菜单项。请看this stackblitz example .

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" overlapTrigger="false">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>