时间戳

首页 > 解决方案 > 如何制作不应该在触发器上重叠的mat-menu

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

问题描述

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

在这里，如果列表更多地重叠在触发器上，我无法看到触发器

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>

标签： angularangular-material2

解决方案

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

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

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

推荐阅读