mat-menu-item 与 mat-menu 按钮大小相同？ （角度材料 v.12）

Posted 2023-03-06

【中文标题】mat-menu-item 与 mat-menu 按钮大小相同？ （角度材料 v.12）

【英文标题】：mat-menu-item in the same size as mat-menu button? (Angular Material v.12)

【发布时间】：2021-09-01 17:21:37

【问题描述】：

我想让 mat-menu-item 按钮的大小与 mat-menu 相同

示例： example

<div class="container d-block d-md-none">
  <div class="row">
    <div class="col d-flex justify-content-center">
      <button mat-button [matMenuTriggerFor]="menu" class="w-75">
        Descobrir
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>Descobrir</button>
        <button mat-menu-item>Navegar</button>
        <button mat-menu-item>Lista de Desejos</button>
      </mat-menu>
    </div>
  </div>
</div>

【参考方案1】：

为您创建了一个 stackblitz - 根据您的喜好调整宽度，但按钮和菜单容器的宽度应该相同： https://stackblitz.com/edit/angular-xyfb4q?file=src/styles.scss

样式：

.my-button 
  width: 280px;


.mat-menu-panel.my-menu 
  width: 280px;

html：

<button class="my-button" color="primary" mat-flat-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  Menu button
</button>
<mat-menu class="my-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>