我使用具有不同 mat-menu-item 的 Angular Material mat-menu,我希望菜单项列表与按钮大小相同。
这就是我所拥有的:
还有我的愿望:
我试图用 css 改变菜单的大小,但它不能正常工作。
CSS:
.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>unarchive</mat-icon>
<span>First</span>
</button>
<button mat-menu-item>
<mat-icon>file_copy</mat-icon>
<span>Second</span>
</button>
</mat-menu>
我做了一个StackBlitz HERE用于我的垫子菜单。
提前致谢!
编辑:我更改了我的代码,因为我正在使用带有 Bootstrap 类“btn-block”的响应式按钮。
最佳答案
使用 ::ng-deep
设置 .mat-menu-panel
的样式>
::ng-deep .mat-menu-panel {
padding: 0 10px!important;
width: 100%!important;
}
关于css - Angular Material mat-menu-item 与 mat-menu 按钮的大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54323267/