Как создать мегаменю в Angular Material

Question

Я пытаюсь создать многоуровневое мегаменю с Angular Material - mat-menu.Теперь проблема здесь со мной в том, что я хотел создать мегаменю, как в начальной загрузке, например this , но в итоге я создал this из материала Angular.Я изменил 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 предназначен для меню Material Design, которые являются наложенными или всплывающими.Мегаменю - это не что иное, как панель инструментов с раскладной панелью, предложенная 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>

И добавил следующий CSS для полной ширины подменю в style.css

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

Теперь проблема заключается в отзывчивомдизайн.Для этого мне нужно написать @media Query в компонентном файле css, например:

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

Здесь - это демонстрация мегаменю StackBlitz мегаменю в mat-menu.Это работает для моего требования.