Question

我正在尝试使用Angular Material-mat-menu构建多级巨型菜单。现在我遇到的问题是，我想拥有像this这样的自举程序中的大型菜单，但最终我用有角度的材质构建了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 Design不使用此模式。 MatMenu用于材料设计菜单，这些菜单是叠加或“弹出”类型。大型菜单不过是G.Tranter建议的带有下拉面板的工具栏。但是大型菜单可以通过编写自定义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中大型菜单的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中创建大型菜单

2 个答案: