垫子菜单项是否与垫子菜单按钮大小相同?(角材料v.12)

Question

我想使垫子菜单项按钮与垫子菜单大小相同

示例：示例

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

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