欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

[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还有openedclosed,两个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设为overpush时,预设会出现一个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之上。另外也能设定fixedTopGapfixedBottomGap,保留一定程度的上下空间。

<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

本日的程式码GitHub:https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-05-sidenav

分支:day-05-sidenav

相关资源

来自  https://www.jianshu.com/p/7ca4571869cb?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&...

普通分类: