Как создать вложенное, сворачивающееся меню с помощью Angular Material2?

Я ищу поддержку в Angular Material2 для вложенных меню в боковой панели. Верхний уровень обычно закрывается по умолчанию, а открытие верхнего уровня открывает вложенные пункты меню.

Я думал, что это имеет смысл в качестве отправной точки, но дочерние элементы навигации визуализируются (плохо) вне родительских элементов:

plnkr

<md-sidenav-container class="my-container">
  <md-sidenav #sidenav class="my-sidenav">
    <md-list>
        <md-list-item>
          <h3 md-line> First Parent </h3>
          <md-nav-list>
            <a md-list-item href="#">First Child</a>
            <a md-list-item href="#">Second Child</a>
            <a md-list-item href="#">Third Child</a>
          </md-nav-list>
        </md-list-item>
        <md-list-item>
          <h3 md-line> Second Parent </h3>
          <md-nav-list>
            <a md-list-item href="#">First Child</a>
            <a md-list-item href="#">Second Child</a>
          </md-nav-list>
        </md-list-item>
    </md-list>
  </md-sidenav>  
  <div class="my-container">
    <button md-button (click)="sidenav.open()">Open</button>
  </div>
</md-sidenav-container>

кто-нибудь создал такое меню боковой панели с @angular/material?

6
angular angular-material2

2 ответов

Я знаю, что это старый вопрос, но для других, приходящих на эту страницу, ищущих то же самое, что и я, вот как я позаботился об этом с текущей версией Angular Material (6.4.6), и как только вы получите стили CSS правильно, он работает красиво.

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

вот пример разметки с некоторыми комментариями, используя объект для ваших навигационных ссылок:

<mat-sidenav-container>
  <mat-sidenav #sidenav
    class="sidenav"
    [mode]="mobileQuery.matches ? 'over' : 'side'"
    [opened]="mobileQuery.matches ? false : true">
    <mat-nav-list>
      <!-- wrap all the nav items in an accordion panel -->
      <mat-accordion [displayMode]="flat">
        <div *ngFor="let navItem of navList">

          <!-- use a simple div for an item that has no children,
            match up the styling to the expansion panel styles -->
          <div class="nav-head" *ngIf="navItem.pages.length === 0">
            <a class="nav-link"
              [routerLink]="navItem.link"
              routerLinkActive="selected"
              (click)="closeSidenav()">
              <mat-icon>{{navItem.icon}}</mat-icon>
              <span class="nav-link-text">{{navItem.heading}}</span>
            </a>
          </div>

          <!-- use expansion panel for heading item with sub page links -->
          <mat-expansion-panel *ngIf="navItem.pages.length > 0"
            class="mat-elevation-z0">
            <mat-expansion-panel-header class="nav-head" [expandedHeight]="'48px'">
              <mat-panel-title class="nav-link">
                <mat-icon>{{navItem.icon}}</mat-icon>
                <span class="nav-link-text">{{navItem.heading}}</span>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <div class="nav-section">
              <!-- loop through all your sub pages inside the expansion panel content -->
              <div *ngFor="let navPage of navItem.pages"
                class="nav-item">
                <a class="nav-link"
                  [routerLink]="navPage.link"
                  routerLinkActive="selected"
                  (click)="closeSidenav()">{{navPage.title}}</a>
              </div>
            </div>
          </mat-expansion-panel>
        </div>
      </mat-accordion>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
2

к сожалению, на данный момент библиотека material design не предоставляет никаких инструментов для выполнения того, что вы хотите.

Как только он выйдет, вы сможете использовать дерево компонент для достижения того, что вы хотите. В противном случае, вы должны искать, чтобы построить его самостоятельно. Я сделал это сам (к сожалению, в собственной кодовой базе), и я был бы рад помочь с конкретными вопросами. Я использовал вложенные <md-list>s,<button md-icon-button>S и пользовательские анимации для этого.

1