我正在使用 Angular Material 组件开发 Angular 应用程序。 在网格中,我有应该支持的内联操作(可以编辑、删除和更多操作)。
目前,当我在网格中嵌入 mat-menu 组件时,项目列表显示非常大的菜单项。我想自定义菜单项的大小(宽度和高度)。
有没有办法做到这一点。
当前行为:
期望:
此外,我正在寻找下拉菜单,如下面的屏幕截图所示(菜单下拉项以绿色边框突出显示。我们可以注意到下拉菜单在图标正下方变得干净,并形成一个清晰的框来显示菜单项。)
但是,在默认菜单中,所选的下拉菜单没有明确的突出显示或边框。
例如,正如我在下面实现的那样,个人资料图片下方的下拉菜单呈现如下。与之前的屏幕截图相比,之前的屏幕截图看起来干净多了。
代码#
<button mat-icon-button [matMenuTriggerFor]="profileMenu" *ngIf="userIsAuthenticated">
<!-- <i class="fa fa-user white-icon" aria-hidden="true"></i> -->
<img class="avatar" src="../../assets/1.jpg">
</button>
<mat-menu #profileMenu="matMenu">
<button mat-menu-item routerLink="/profile"> <i class="fa fa-user" aria-hidden="true"></i> Profile </button>
<button mat-menu-item (click)="onLogout()"> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout </button>
</mat-menu>
添加CSS类后的变化
::ng-deep .mat-menu-content {
width: 200px !important;
height: 120px !important;
}
最佳答案
以下 CSS 将完成您的需要。
::ng-deep .mat-menu-content {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.mat-menu-item{
line-height:35px;
height:35px;
}
堆栈 Blitz
https://stackblitz.com/edit/angular-uddgqx?embed=1&file=app/menu-overview-example.css
关于angular - 自定义 Angular Material mat-menu-item 以显示尺寸较小的项目(宽度和高度),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55135865/