[英]Angular Material mat-menu-item to be the same size as the mat-menu button
I use mat-menu of Angular Material with different mat-menu-item and I would like the list of menu items to be the same size as the button.我将 Angular Material 的 mat-menu 与不同的 mat-menu-item 一起使用,并且我希望菜单项列表与按钮的大小相同。
That's what I have:这就是我所拥有的:
And what I wish:还有我的愿望:
I tried to change the size of the menu with the css, but it does not work properly.我试图用 css 更改菜单的大小,但它无法正常工作。
CSS: CSS:
.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}
HTML: 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>
I did a StackBlitz HERE for my mat-menu.我在 这里为我的 mat-menu 做了一个StackBlitz 。
Thank you in advance!先感谢您!
EDIT : I changed my code because I'm using a responsive button with the bootstrap class "btn-block".编辑:我更改了我的代码,因为我使用的是带有引导程序类“btn-block”的响应式按钮。
Use ::ng-deep
to style .mat-menu-panel
使用
::ng-deep
设置.mat-menu-panel
样式
::ng-deep .mat-menu-panel {
padding: 0 10px!important;
width: 100%!important;
}
I found a solution really not clean, but here it is:StackBlitz HERE我发现一个解决方案真的不干净,但在这里:StackBlitz HERE
If someone would have a CSS solution, I'm interested.如果有人有 CSS 解决方案,我很感兴趣。
HTML: HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue" id="button">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
TS: TS:
export class AppComponent implements DoCheck{
ngDoCheck(){
var widthButton=document.getElementById("button").offsetWidth;
var elems = document.getElementsByClassName('mat-menu-panel');
for(var i = 0; i < elems.length; i++) {
elems[i].style.width = widthButton+"px";
}
}
}
CSS: CSS:
.cdk-overlay-pane {width: 100%!important;}
.mat-menu-panel {max-width: 100%!important; min-width: 64px!important;}
DEMO:演示:
Use menuOpened event for matMenuTriggerFor and add width runtime为 matMenuTriggerFor 使用 menuOpened 事件并添加宽度运行时
HTML : HTML :
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue" (menuOpened)="onMenuOpened()" id="button">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
TS : TS :
onMenuOpened() {
const btn = document.getElementById('revisitSection');
if (btn) {
const elems = document.getElementsByClassName('button') as any;
// for (let i = 0; i < elems.length; i++) {
// elems[i].style.width = `${btn.offsetWidth}px`;
// }
for (const item of elems) {
item.style.width = `${btn.offsetWidth}px`;
}
}
}
I don't recommend to use ngDoCheck.我不建议使用 ngDoCheck。 it has more performance issue.
它有更多的性能问题。
For those searching this in the future your can set this in your对于将来搜索此内容的人,您可以在您的
.mat-menu-panel {
min-width: fit-content !important;
padding: 0px 0px !important;
}
.cdk-overlay-pane {
min-width: fit-content;
}
To make the mat-menu dynamic then you can apply with and styling in the component css of ts file through [ngClass]="getClassWithWidthandHieght()".Through css set the class of the in side div to the class like this the apply the styling set you styles.要使 mat-menu 动态化,那么您可以通过 [ngClass]="getClassWithWidthandHieght()" 在 ts 文件的组件 css 中应用样式和样式。通过 css 将侧边 div 的类设置为这样的类,应用造型设置你的风格。
.example-panel{
min-width: 500px;最小宽度:500px; }
}
Since ::ng-deep is going to be deprecated,由于 ::ng-deep 将被弃用,
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
another trick is to create margin around text span (mx-4 is bootstrap class for margin left and right另一个技巧是在文本跨度周围创建边距(mx-4 是左右边距的引导类
<button mat-menu-item>
<mat-icon>file_copy</mat-icon>
<span class="mx-4">Second</span>
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.