如何使用 Angular Material 构建网格布局菜单项答案

【问题标题】：How to build Grid layout menu item using Angular Material如何使用 Angular Material 构建网格布局菜单项
【发布时间】：2021-07-22 15:08:37
【问题描述】：

抱歉这个愚蠢的问题。我是新来的？？？？。无论如何，关于我的问题。我无法使用 GRID VIEW 创建角度材质菜单，而不是默认的 LIST VIEW。我被困住了，我什至不知道从哪里开始。按照惯例，要在 Angular 组件中创建材质菜单，您需要在 Angular 项目和组件中导入材质，然后在 component.html 中执行此操作...

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

结果如下： List view menu

但我想要的是 GRID View 菜单，看起来像来自 Google 的 this

如何在 Angular Material 中实现该布局？谢谢，非常感谢您的帮助。

【问题讨论】：

标签： html css angular gridview angular-material

【解决方案1】：

我认为<mat-grid-list> 是您要找的。p>

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile>
      <button mat-menu-item>
      <mat-icon>dialpad</mat-icon>
  <span>Redial</span>
  </button>
</mat-grid-tile>
<mat-grid-tile>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
</mat-grid-tile>
<mat-grid-tile>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-grid-tile>
<mat-grid-tile>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-grid-tile>

【讨论】：

谢谢，这与我想要实现的目标非常接近。但是，在实施您的解决方案后，我没有看到图标标签。另外，有没有办法自定义浮动菜单的宽度？

【解决方案2】：

知道了！！它是 mat-menu 自定义类的 CSS 中 @'s answer 和 ::ng-deep 声明的组合。即：component.html

<mat-menu #menu="matMenu" class="custom-grid-menu">
    {{grid contents eg. Icons etc}}
</mat-menu>

然后在component.css上

::ng-deep .custom-grid-menu{
    width: 100px;
}

然后整个事情变得很好。

【讨论】：