[Angular Material完全攻略] Day 05 - 打造基本后台(1) - SideNav

我们终于要正式开始时做一个后台(dashboard)画面啦，今天我们会先使用Angular Material的SideNav元件，把边栏的空间先切出来，这个空间通常是用来放置主选单的空间，我们就来看看该如何开始吧！

关于Material Design的基本系统架构

在Material Design的架构指南中，一个应用程式不管是行动装置、平板还是桌机，在画面基本上都可以分为3个区块，toolbar、sidenav和content

image.png

图片来源：https://material.io/guidelines/layout/structure.html#structure-ui-regions

• Toolbar：通常用来放置基本的品牌logo、简单的搜寻、常用的功能和切换左右sidenav的按钮等等。

• SideNav：放置使用者资讯，或是主要的功能选单等等、可以选择常驻在左边或右边，也可以选择平常隐藏起来，需要的时候可以动态的打开来。

• Content：当然就是主要的功能画面啦。

开始使用Angular Material的SideNav

在使用SideNav前，我们一样要将MatSidenavModule加入，这个步骤之前已经做过很多次了，就只说明不介绍步骤；另外由于我们之后会再持续设计部落格页面、问卷页面等等，因此已将程式切割到不同的Module中并设定好routing，由于这是属于Angular基本知识，这裡也不再多做说明，程式码都在GitHub上，可以直接参考。

加入MatSidenavModule后，我们就可以直接开始使用，基本上SideNav分为3个区块

• <mat-sidenav-container>：代表整个包含边栏导览的容器

• <mat-sidenav>：实际上边栏导览的内容

• <mat-sidenav-content>：导览以外的实际内容

因此我们的画面程式码可以简单写成如下：

<mat-sidenav-container>
  <mat-sidenav #sideNav>
    我是左边选单  </mat-sidenav>

  <mat-sidenav-content>
      <button mat-button (click)="sideNav.toggle()">切换左边选单状态</button>
    <router-outlet></router-outlet>
  </mat-sidenav-content></mat-sidenav-container>

一个包含导览功能的选单就已经出现啦！不过这时候我们的画面上还不会将选单显示出来，这是因为Angular Material预设的<mat-sidenav>是隐藏的，不过我们可以透过程式把选单叫出来，所以画面上我们先建立了一个按钮，透过这个按钮呼叫sideNav的toggle()方法，来切换左边导览列的显示状态。

结果如下：

image

控制SideNav的显示状态

我们可以透过open()、close()和toggle()来控制SideNav的显示状态，这些方法都会回传一个Promise<MatDrawerToggleResult>来告诉你SideNav的显示状态。

  toggleSideNav(sideNav: MatSidenav) {
    sideNav.toggle().then((result: MatDrawerToggleResult) => {      console.log(result);      console.log(`选单状态：${result.type}`);
    });
  }

结果如下：

image

除此之外SideNav还有opened和closed，两个output，当SideNav被打开或关时，就会触发。

<mat-sidenav #sideNav (opened)="opened()" (closed)="closed()">

SideNav的常用Input属性

mode

<mat-side-nav>有一个mode属性，可以用来决定SideNav的呈现方式，目前有3个值可以设定

• over ：预设值，SideNav会浮动在画面之上，背后会出现一个灰底的backdrop，点击SideNav以外的地方(或按下ESC)会隐藏起来。

• push ：跟over类似，但显示的时候会把画面往另外一个方向推，同时也会有一个灰底的backdrop，在萤幕较大的装置时可以同时浏览SideNav和选单，但在行动装置等小萤幕上则比较没有感觉。

image

• side ：效果类似push，但不会出现灰底的backdrop，因此可以同时操作主要的content画面以及SideNav的内容。

  

  image

opened

透过opened属性，我们可以不需要使用元件的open()或toggle()方法来打开，只需要设定这个属性即可变更显示状态，true代表显示，false代表隐藏。因此当我们需要一个固定在旁边的导览选单时，可以同时将mode设为side，并将opened设为true，即可让导览选单常驻在旁边，只要不在程式中切换这些状态，就不会被隐藏。

<mat-sidenav opened="true" mode="side"></mat-sidenav>

position

SideNav支援显示在画面的起始(start，预设值，通常是左边)或结束(end，通常是右边)，我们可以透过设定position决定SideNav要放在哪边，同时我们也能左右各提供一个导览选单。

  <mat-sidenav opened="true" mode="side">
    <div>我是左边选单</div>
  </mat-sidenav>

  <mat-sidenav opened="true" mode="side" position="end">
    <div>我是右边选单</div>
  </mat-sidenav>

结果如下：

image.png

不过需要注意的是，左右都只能有1个SideNav，因此以下写法都是不正确的

  <mat-sidenav opened="true" mode="side">
    <div>我是左边选单</div>
  </mat-sidenav>

  <mat-sidenav opened="true" mode="side" position="start">
    <div>我是左边选单2号</div>
  </mat-sidenav>

  <mat-sidenav opened="true" mode="side" position="end">
    <div>我是右边选单</div>
  </mat-sidenav>

  <mat-sidenav opened="true" mode="side" position="end">
    <div>我是右边选单2号</div>
  </mat-sidenav>

当这样的状况出现时，会看到以下的错误讯息

image.png

disableClose

在mode设为over或push时，预设会出现一个backdrop，当点选backdrop或按下esc时则会自动隐藏SideNav，如果希望不要自动隐藏，则可以设定disabledClose，有了这个属性就必须另外在可点选的范围内加上程式设定隐藏SideNav。

  <mat-sidenav #sideNav mode="over" disableClose>
    <div>我是左边选单</div>
    <div>
      <button mat-raised-button color="warn" (click)="toggleSideNav(sideNav)">切换选单状态</button>
    </div>
  </mat-sidenav>

fixedInViewport / fixedTopGap / fixedBottomGap

当我们有一个toolbar在上层时，预设SideNav现时不会挡住toolbar

<mat-toolbar>我是Toolbar</mat-toolbar><mat-sidenav-container>
  <mat-sidenav #sideNav mode="over">
    <div>我是左边选单</div>
    <div>
      <button mat-raised-button color="warn" (click)="toggleSideNav(sideNav)">切换选单状态</button>
    </div>
  </mat-sidenav>
  ...</mat-sidenav-container>

如下图：

image

这时候我们可以设定fixedInViewport="true"，让SideNav能够显示在Toolbar之上。另外也能设定fixedTopGap和fixedBottomGap，保留一定程度的上下空间。

<mat-sidenav #sideNav mode="over"  fixedInViewport="true" fixedTopGap="20" fixedBottomGap="20"></mat-sidenav>

结果如下：

image

关于Toolbar的使用方式会在明天详细说明。

关于MatDrawer

除了SideNav之外，Angular Material还提供了一个类似的component－<mat-drawer>。比起SideNav是设计给整个画面使用，Drawer则是提供给放在content裡面小范围区块使用。除了不支援fixedInViewport(毕竟没有需要遮挡的toolbar了)以外，这个drawer component使用上基本和sidenav完全相同，

<mat-drawer-container style="height:100px;border: 1px solid black">
  <mat-drawer mode="side" opened="true">Drawer Side</mat-drawer>
  <mat-drawer-content>Content</mat-drawer-content></mat-drawer-container>

结果如下：

image.png

本日小结

今天我们介绍了SideNav相关的元件，这是Material Design设计中对于一个基本的APP很重要的环节，因次SideNav也提供来了很多微调显示效果，让我们在设计时更能够应付不同的情境。

明天我们将介绍画面结构的另一个重要component－Toolbar

作者：readilen
链接：https://www.jianshu.com/p/7ca4571869cb