在角材料设计的工具栏下方设置sidenav? [英] Setting sidenav below toolbar in angular material design?

问题描述

在角度材料设计中，如何在工具栏下方设置边导航"?这样sidenav不会出现在工具栏上.

推荐答案

<mat-drawer-container class="example-container">
  <mat-toolbar class="example-header" class="fixed-header" color="primary">
    <mat-toolbar-row>

      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon" *ngIf="drawer.opened"><span><i class="fa fa-close"></i></span>
        </mat-icon>
        <mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened"><span><i class="fa fa-th-large"></i></span>
        </mat-icon>
      </button>


    </mat-toolbar-row>
  </mat-toolbar>
  <mat-drawer #drawer class="example-sidenav" mode="side" opened>
    <mat-nav-list>
      <a mat-list-item href="#"><i class="fa fa-dashboard"></i><span class="nav-label">Dashboard</span></a>
      <a mat-list-item href="#"><i class="fa fa-desktop"></i><span class="nav-label">Branches</span></a>

    </mat-nav-list>


  </mat-drawer>


  <div class="example-sidenav-content">

    <router-outlet></router-outlet>
  </div>
  <mat-toolbar class="example-footer">Footer</mat-toolbar>
</mat-drawer-container>

这篇关于在角材料设计的工具栏下方设置sidenav?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！