Как создать свернутое меню, используя Angular Material?

Question

В документации углового материала есть классная особенность.Меню с подкатегорией, которое можно развернуть / свернуть.

Возможно ли создать его с помощью какого-либо компонента?Или я должен сделать это сам с нуля?Или, может быть, вы можете предложить мне пакет, который сэкономит мое время.

Answer 1

Я пытался добиться этого сам с боковой навигацией.Может быть, это поможет вам сэкономить время.

Элементы nav соответствуют простому интерфейсу:

interface NavItem {
displayName: string;
disabled?: boolean;
iconName: string;
route?: string;
children?: NavItem[];}

А затем в component.html основная идея состоит в том, чтобы рекурсивно добавлять элементы nav.(* ngFor).Используйте мат-аккордеоны для каждой категории, а затем используйте другую * ngFor, чтобы получить детей:

<mat-nav-list>
<span *ngFor="let item of menu">
  <span *ngIf="item.children && item.children.length > 0">
    <mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            <!-- Cabeceras del submenu -->
            <div fxLayout="row" fxLayoutAlign="space-between center" > 
              <mat-icon>{{item.iconName}}</mat-icon>
              {{item.displayName}}
            </div>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <span *ngFor="let child of item.children">
          <mat-list-item routerLink="[child.route]">
            <!-- Entradas de cada submenú  -->
            <div fxLayout="row" fxLayoutAlign="space-between center" > 
              <mat-icon>{{child.iconName}}</mat-icon>
              {{child.displayName}}
            </div>
          </mat-list-item>
        </span>
      </mat-expansion-panel>
    </mat-accordion>
  </span>
  <span *ngIf="!item.children || item.children.length === 0">
    <mat-list-item routerLink="[item.route]">
      <!-- Entradas principales -->
      <div fxLayout="row" fxLayoutAlign="space-between center">
        <mat-icon>{{item.iconName}}</mat-icon>
        {{item.displayName}}
      </div>
    </mat-list-item>
  </span>
</span>

Взгляните: https://stackblitz.com/edit/angular-side-nav-dynamic-expansive-menu

Answer 2

Использование mat-extension-panel было бы хорошим началом.Пример по умолчанию использует аккордеон, чтобы иметь только одну расширенную панель, вы можете найти пример того, как развернуть несколько панелей одновременно здесь :

1 - Вы должны удалитьmat-accordion для включения нескольких расширенных панелей.

2- Используйте расширенный параметр, чтобы изменить несколько состояний одновременно.