Question

我将Angular Material的mat-menu使用不同的mat-menu-item，我希望菜单项的列表与按钮的大小相同。

这就是我所拥有的：

还有我想要的：

我尝试使用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。

提前谢谢！

编辑：我更改了代码，因为我在引导类“ btn-block”中使用了响应式按钮。

Answer 1

使用::ng-deep来设置.mat-menu-panel的样式

::ng-deep .mat-menu-panel {
  padding: 0 10px!important;
  width: 100%!important;
}

See working code

Answer 2

我发现一个解决方案确实不干净，但这里是：StackBlitz HERE

如果有人有更好的表现，我就是接受者。

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：

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：

.cdk-overlay-pane {width: 100%!important;}
.mat-menu-panel {max-width: 100%!important; min-width: 64px!important;}

演示：

Answer 3

将menuOpened事件用于matMenuTriggerFor并添加宽度运行时

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 ：

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`;
      }
    }
  }

我不建议使用ngDoCheck。它有更多的性能问题。

Answer 4

对于以后搜索此内容的人，您可以在自己的

中进行设置

.mat-menu-panel {
  min-width: fit-content !important;
  padding: 0px 0px !important;
}

.cdk-overlay-pane {
  min-width: fit-content;
}

要使mat-menu动态，您可以通过[ngClass] =“ getClassWithWidthandHieght（）”在ts文件的组件css中进行样式化。通过css将in侧div的类设置为此类应用您设置的样式集。

.example-panel{

最小宽度：500像素； }

Answer 5

由于 ::ng-deep 将被弃用，

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

另一个技巧是在文本跨度周围创建边距（mx-4 是左右边距的引导类

  <button mat-menu-item>
    <mat-icon>file_copy</mat-icon>
    <span class="mx-4">Second</span>
  </button>

Angular Material垫菜单项的大小与垫菜单按钮的大小相同

5 个答案: