Как создать несколько сиденав в угловом материале? - PullRequest
Новая
       40

Как создать несколько сиденав в угловом материале?

0 голосов
/ 30 ноября 2018

У меня есть sidenav на левой стороне, у него было несколько меню.если в меню щелкнул другой sidenav, открытый рядом с предварительным просмотром sidenav.Угловой материал сден на левую и правую позиции.Правильно добавить дополнительные sidenavs

пример ссылки https://stackblitz.com/edit/angular-mhmxv6?embed=1&file=src/app/app.component.html

multipleSidenav

1 Ответ

0 голосов
/ 30 ноября 2018

Вам нужно будет обернуть существующий html внутри родительского элемента mat-sidenav-container новым mat-sidenav для этого родителя.

Stackblitz

https://stackblitz.com/edit/angular-nure99?embed=1&file=app/sidenav-overview-example.html

HTML 

     <div>
    <mat-sidenav-container class="sidenav-full">
        <mat-sidenav #sidenav1 mode="side" position="start" role="navigation" class="sidenav-wv">
      this is parent menu
        </mat-sidenav>
        <mat-sidenav-content>
            <mat-sidenav-container class="sidenav-full">
                <mat-sidenav #sidenav2 opened mode="side" position="start" role="navigation" class="sidenav-wv">

                    <div fxLayout="column" class="sidenav-normal">
                        <button (click)="sidenav2.toggle()" mat-button class="align-center color-white">
          <i class="material-icons">reorder</i>
        </button> 
        <button mat-button class="rec-menu mt-30" (click)="sidenav1.toggle()">
          <span class="color-white">menu 1</span>
        </button>
        <button mat-button class="rec-menu mt-30" (click)="sidenav1.toggle()">
          <span class="color-white">menu 2</span>
        </button>
      </div>

    </mat-sidenav>    
    <mat-sidenav-content>
      <mat-toolbar role="toolbar" class="main-header mat-elevation-z1 sticky-header">
        <mat-toolbar-row>
          <button mat-button (click)="sidenav2.toggle()" class="toggle-Mbtn new--item">
            <i class="material-icons color-white">menu</i>
          </button>
          <h2 class="header-text header-block">This is Dashboard</h2> 
          <span class="flex-spacer"></span>
          <button mat-icon-button>
            <mat-icon class="color-white">search</mat-icon>
          </button>
          <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon class="color-white">more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu" [overlapTrigger]="false">
            <button mat-menu-item>
              <mat-icon>power_settings_new</mat-icon>
              <span>Logout</span>
            </button>
          </mat-menu>
        </mat-toolbar-row>
      </mat-toolbar>

      <div>
        main board
      </div>

     </mat-sidenav-content>
    </mat-sidenav-container>
   </mat-sidenav-content>
  </mat-sidenav-container>
</div>
...