如何增加垫菜单项的宽度？

Question

<div fxHide fxHide.xs="false" fxHide.md="true">
  <button mat-icon-button [matMenuTriggerFor]="menu" class="my-menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-4" (click)="repoService.onToolbarClick(menu)"
    class="notifications-dropdown">

      <mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
      <span class="notification-row">{{menu.displayKey | translate}}</span>

    </button>
  </mat-menu>

CSS文件

<div fxHide fxHide.xs="false" fxHide.md="true">
  <button mat-icon-button [matMenuTriggerFor]="menu" class="my-menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-4" (click)="repoService.onToolbarClick(menu)"
    class="notifications-dropdown">

      <mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
      <span class="notification-row">{{menu.displayKey | translate}}</span>

    </button>
  </mat-menu>

我已经尝试过了，但是对我不起作用！

md-menu覆盖Angular 2中的默认最大宽度

Answer 1

我遇到了同样的问题并通过覆盖 mat-menu-panel max width 属性解决了它：

::ng-deep.mat-menu-panel {
  max-width: none !important;
}

希望能帮助到你

Answer 2

在 Angular 12 的 CSS 页面上，以下内容对我有用，因为它使宽度能够根据动态内容灵活地适应。它还使菜单保持一致。

::ng-deep.mat-menu-panel {
  max-width:fit-content !important;
}

Answer 3

https://material.angular.io/components/menu/api

@Input('class') panelClass: 字符串

此方法采用在主机 mat-menu 元素上设置的类，并将它们应用于显示在覆盖容器中的菜单模板。否则，很难从组件外部设置包含菜单的样式。

<mat-menu class="my-class" ... >

css：

.mat-menu-panel.my-class { width: 400px; }

Answer 4

要设置单个菜单的样式，请添加一个附加类<mat-menu>并更改宽度。这在 Angular 9 中有效：

<button mat-stroked-button [matMenuTriggerFor]="myMenu">Open Menu</button>
<mat-menu #myMenu="matMenu" class="my-menu">
  <button mat-menu-item>Approve</button>
  <button mat-menu-item>Reject</button>
</mat-menu>

::ng-deep .my-menu {
    width: 190px;
}

Answer 5

请注意，我使用的是Angular7。我知道这与Angular 2有关，但我希望有人会对此有所帮助。

我还需要将菜单设置为固定宽度，但是随后，我意识到菜单从内容中获取宽度。

因此，您可以做的是创建一个不属于角形材料的元素，并为其指定宽度。例如...

<div class="ProfileBar">
  <mat-icon [matMenuTriggerFor]="profileMenu"class="ProfileImage">account_circle</mat-icon>

  <mat-menu #profileMenu="matMenu">
    <div class="ProfileInfo">
      <mat-icon class="ProfileInfo-user-icon">account_circle</mat-icon>
      <p class="full-name">Some full name</p>
       <p class="nickname">@SomeNickname</p>
    </div>

    <button (click)="logout()" mat-menu-item>Logout <mat-icon>exit_to_app</maticon></button>
  </mat-menu>
</div>

因此，这里提供的是一个ProfileInfo类，您可以在其上正常放置宽度， .ProfileInfo { width: 300px }诸如此类。这将使菜单具有其宽度，mat-menu-items并将跟随该宽度。您甚至不必使其功能正常，它只能像

  <mat-menu #profileMenu="matMenu">
    <div class="ClassOnlyForTheWidth"></div>
  </mat-menu>

就是这样。

另一方面，我不知道这对您没有用，您可以通过放置完全删除材料样式[class]="'MyClass'"。这将一起删除所有材质样式，例如，根据您使用的浏览器，原生呈现一个按钮元素，而无需任何样式。如果您这样做[class]="'MyClass mat-menu-item'"，它将返回菜单项（或任何角度组件）的样式，但是您又回到了整个stackoverflow线程的问题。

享受，我希望这会帮助某人

Answer 6

 <div fxHide fxHide.xs="false" fxHide.md="true">
            <button mat-icon-button [matMenuTriggerFor]="menu">
                <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-40" (click)="repoService.onToolbarClick(menu)">
                    <mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
                    <span class="ml-8">{{menu.displayKey | translate}}</span>
                </button>
            </mat-menu>
        </div>

• 我们只需要稍作修改（class="mr-40"），mr 代表 margin right，mr 取 2 的倍数，这样我们就可以根据需要增加宽度。