如何在 Angular Material 中创建大型菜单

Question

我正在尝试使用 Angular Material - mat-menu 构建多级大型菜单。现在我的问题是我想要像 bootstrap 中的大型菜单，就像 Angular material 中的 this but I ended up building this 一样。我已经更改了 CSS 来更改宽度，如下所示：

.cdk-overlay-connected-position-bounding-box {
   position: absolute;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   min-width: 1px; 
   min-height: 1px; 
 }
 .cdk-overlay-pane {
   position: absolute;
   pointer-events: auto;
   box-sizing: border-box;
   z-index: 1000;
   display: flex;
   max-width: 100%;
   max-height: 100%;
 }

如何在 Angular Material 中设计大型菜单，如下图所示？

我正在使用 Angular 7.3.1（最新版本）。

Answer 1

是的，Material设计确实没有使用这种模式。 MatMenu 用于 Material 设计菜单，覆盖或 'popup' 类型。正如 G.Tranter 所建议的那样，大型菜单只不过是一个带有下拉面板的工具栏。但是mega menu可以通过写custom css来实现。我不知道这是不是正确的做法。我有 mat-menu 这样的 .html 文件

<button mat-button [matMenuTriggerFor]="menu" class="my-full-width-menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item>Item 3</button>
  <button mat-menu-item>Item 4</button>
</mat-menu>

并在 style.css

中添加以下 css 用于全角子菜单

.mat-menu-panel {
  min-width: 90vw !important;
  max-width: 95vw !important;
  margin-left: -8px;
  margin-top: 24px;
}

现在关注的是响应式设计。为此，我需要像这样

在组件 css 文件中编写 @media Query

@media (min-width: 576px) {
  button.mat-menu-item {
  width: 100%;
  float: left;
 }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  button.mat-menu-item {
  width: 50%;
  float: left;
 }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  button.mat-menu-item {
  width: 33.333%;
  float: left;
 }
}
/* very large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  button.mat-menu-item {
  width: 25%;
  float: left;
 }
}
/* Extra large devices (large desktops, 1550px and up)*/
@media (min-width: 1550px) {
  button.mat-menu-item {
  width: 25%;
  float: left;
 }
}

Here 是 mat-menu 中 mega menu 的 StackBlitz 演示。这符合我的要求。

Answer 2

我有同样的问题，最后我不得不自己处理，我不知道它的正确方法与否；但它奏效了

<button mat-raised-button [matMenuTriggerFor]="profileManagementMenu" class="option-button">
          {{'ProfileManagement'|translate}}
        </button>
        <mat-menu #profileManagementMenu="matMenu" class="mega-menu" xPosition="before">
          <div fxLayout="row" fxLayoutAlign="start" class="p-1">
            <div fxLayout="column" fxLayoutAlign="start" class="p-1 config">
              <button mat-menu-item>
                {{'Col11'|translate}}
              </button>
              <button mat-menu-item>
                {{'Col12'|translate}}
              </button>
            </div>
            <span class="border" style="opacity: .3"></span>
            <div fxLayout="column" fxLayoutAlign="start" class="p-1 config">
              <h7 fxLayoutAlign="center">header2</h7>
              <button mat-menu-item>
                {{'Col21'|translate}}
              </button>
              <button mat-menu-item>
                {{'Col22'|translate}}
              </button>
              <button mat-menu-item>
                {{'Col23'|translate}}
              </button>
              <button mat-menu-item>
                {{'Col24'|translate}}
              </button>
              <button mat-menu-item>
                {{'Col25'|translate}}
              </button>
              <button mat-menu-item>
                {{'Col26'|translate}}
              </button>
            </div>
          </div>
        </mat-menu>

及其 scss:

.mega-menu .mat-menu-content {
  min-width: 112px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 48px);
  outline: 0;
  background: none;
  color: white !important;

  :hover {
    background: none;
    color: white;

  }
}

.mat-menu-item:hover {
  background: #338ACF !important;
  color: white;
}

.mat-menu-content {
  min-width: 112px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 48px);
  outline: 0;
  opacity: .95;
  background: #2688d6b8;
  color: white !important;

}

如何在 Angular Material 中创建大型菜单

How to create mega menu in Angular Material

angular-material

angular6

materialize

angular-material2

angular7