如何制作不应该在触发器上重叠的mat-menu

Question

我在 mat 菜单中有一个长长的列表，不应该在触发器上重叠

here, I am not able to see trigger if the list is more its overlapping on trigger

https://stackblitz.com/angular/egdpolqbbgp?file=src%2Fapp%2Fmenu-overview-example.html

<!-- #docregion mat-menu-trigger-for -->
<br/>
<br/>
<br/>
<br/>
<br/>
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<!-- #enddocregion mat-menu-trigger-for -->
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>

  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>

  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 1</button>
</mat-menu>

Answer 1

matMenu 提供了一个输入来处理菜单是否应该与触发器重叠 (docs)：

设置overlapTrigger = false 应该可以解决问题：

<mat-menu [overlapTrigger]="false"></mat-menu>