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

Question

抱歉这个愚蠢的问题。我是新来的。无论如何，关于我的问题。我在使用 GRID VIEW 创建 angular material 菜单时遇到问题，而不是默认的 LIST VIEW。我被困住了，我什至不知道从哪里开始。按照惯例，要在 angular 组件中创建 material 菜单，您需要在 angular 项目和组件中导入 material，然后在 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 视图菜单，看起来像 Google

中的 this

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

Answer 1

我想 <mat-grid-list> 就是您要找的。

<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>

Answer 2

知道了！！它是 @'s answer 和 ::ng-deep 在 mat-menu 的自定义 class 上 CSS 声明的组合。即：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;
}

然后整个事情变得很棒。

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

How to build Grid layout menu item using Angular Material

html

css

gridview

angular-material

angular