Angular Material mat-menu-item 与 mat-menu 按钮的大小相同

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>

我在 这里为我的 mat-menu 做了一个StackBlitz 。

先感谢您！

编辑：我更改了我的代码，因为我使用的是带有引导程序类“btn-block”的响应式按钮。

Answer 1

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

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

查看工作代码

Answer 2

我发现一个解决方案真的不干净，但在这里：StackBlitz HERE

如果有人有 CSS 解决方案，我很感兴趣。

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

为 matMenuTriggerFor 使用 menuOpened 事件并添加宽度运行时

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 将侧边 div 的类设置为这样的类，应用造型设置你的风格。

.example-panel{

最小宽度：500px； }

Answer 5

万一有人仍然需要这个。 这是我的解决方案

这个想法是读取 matMenuTriggerFor clientWidth，将其作为 matMenuTriggerData 传递给菜单本身，并将其绑定到包装器宽度

Answer 6

由于 ::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>