转载
在昨天介绍SideNav时，我们有稍微提到过Toolbar，今天我们就比较认真的来看看Material Design中Toolbar的特性，及Angular Material中Toolbar可以呈现什麽样的变化吧！

Material Design中的Toolbar

在Material Design的Toolbar设计指南中，Toolbar通常会浮动在整个系统的正上方，所有的内容应该从toolbar下放通过，除非是暂时性显示的元件如dialog等等。我们可以把Toolbar当作整个系统的header(或footer)角色，在这裡放置品牌Logo、标题、和一些简单的执行动作等等。

开始使用Angular Material中的Toolbar

Toolbar的元件放置在MatToolbarModule之中，加入这个module后，我们可以使用mat-toolbar在画面上呈现一个简单的toolbar

<mat-toolbar>
  <span>IT铁人赛－Angular Material Demo</span>
</mat-toolbar>

效果如下：

image

可以看到我们已经加入一个简单的toolbar了，不过这样还有点小小问题，就是我们的toolbar没有浮动在画面的最上方，随著画面卷动，toolbar会消失在画面之中，由于toolbar只是一个component，可以在画面中的任何地方加入，因此直接强制显示在画面的最上方在元件设计上也好像怪怪的，但这只是元件设计上的问题而已，要让这个toolbar固定在最上方其实也不困难，设定一下CSS就好了！

.demo-app-header {
  position: fixed;
  top: 0;
  z-index: 2;
}

.demo-app-container,
.demo-app-sidenav {
  position: absolute;
  padding-top: 64px;
  height: calc(100vh - 64px);
}

目的是将toolbar固定在上方，并透过z-index: 2来避免卷动时被下方内容盖过， mat-sidenav-container跟mat-sidenav乔出一个上方64px的空间给toolbar使用，避免内容被toolbar盖过。

接著将原来的元件套上这些样式

<mat-toolbar class="demo-app-header">
  <span>IT铁人赛－Angular Material Demo</span>
</mat-toolbar>

<mat-sidenav-container class="demo-app-container">
  <mat-sidenav class="demo-app-sidenav">
    ...
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

需要特别注意的是，前一天我们在mat-sidenav设定了fixedInViewport，在CSS调整后这个属性会造成sidenav显示跑掉，因此我们要这个设定拿掉，目前GitHub上已有Issue在讨论了，希望之后会调整萝。

成果如下：

image

设定Toolbar的样式

跟其他Angular Material元件一样，我们可以透过color来改变toolbar的颜色：

<mat-toolbar color="primary">这是primary的toolbar</mat-toolbar>
<mat-toolbar color="accent">这是accent的toolbar</mat-toolbar>
<mat-toolbar color="warn">这是warn的toolbar</mat-toolbar>

成果如下：

替Toolbar加上各种按钮

接著我们想在toolbar加上一些东西，第一个是在左边加上一个icon，可以透过这个icon来开关SideNav，这是一种很常见的后台做法

<mat-toolbar color="primary" class="demo-app-header">
  <button mat-icon-button (click)="sideNav.toggle()">
    <mat-icon>{{ sideNav.opened ? 'close' : 'menu' }}</mat-icon>
  </button>
  <span>IT铁人赛－Angular Material Demo</span>
</mat-toolbar>

效果如下：

image

接著我们想在toolbar的最右边加上一个登出的按钮，不过要怎麽把按钮推到最右边去呢，其实只要透过CSS就可以轻易解决，由于Toolbar内的排版是flex，我们可以加入一个分隔用的空间，把空间后的内容都推到另外一边去。

.toolbar-seprator {
  flex: 1 1 auto;
}

接著在toolbar中加入这个分隔器

<mat-toolbar color="primary" class="demo-app-header">
  <button mat-icon-button (click)="sideNav.toggle()">
    <mat-icon>{{ sideNav.opened ? 'close' : 'menu' }}</mat-icon>
  </button>

  <span>IT铁人赛－Angular Material Demo</span>

  <!-- 在这之后的都会被推到右边去 -->
  <span class="toolbar-seprator"></span>

  <button mat-icon-button>
    <mat-icon>message</mat-icon>
  </button>
  <button mat-icon-button>
    <mat-icon>exit_to_app</mat-icon>
  </button>
</mat-toolbar>

效果如下：

一个有模有样的toolbar就出现啦！

多行的Toolbar

Toolbar预设是单行的，在mat-toolbar中的内容预设都会在同一行显示，若在一行toolbar中放入太多资讯则可能会因为宽度有限的关系无法显示，这时候我们可以用多个<mat-toolbar-row>来设定多行的toolbar。

    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <span>第一行Toolbar</span>
        <span class="toolbar-seprator"></span>
        <mat-icon>favorite</mat-icon>
      </mat-toolbar-row>
      <mat-toolbar-row>
        第二行Toolbar
        <span class="toolbar-seprator"></span>
        <mat-icon>delete</mat-icon>
      </mat-toolbar-row>
    </mat-toolbar>

效果如下：

乍看之下跟用多个<mat-toolbar>很类似，但<mat-toolbar-row>本身是没有color可以设定的，而是跟随著mat-toolbar走，另外在语义上也有所不同，在CSS状况比较複杂时，也可能造成画面错乱的问题，因此应该看情境决定使用的时机。

本日小结

今天我们学会了另一个前端上常用的元件－Toolbar，Toolbar算是相对简单的元件，也因为他的简单，给了开发人员更多的弹性空间去灵活调整，不管是在整个页面架构上，还是系统内的功能画面，都有很大的机会去使用到，好好熟练Toolbar的用法对于功能画面的开发会很有帮助喔！

明后天我们再来学习使用其他元件，来丰富这两天学到的SideNav和Toolbar的内容吧！

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

分支：day-06-toolbar

相关资源

• Material Design - Toolbars
• Angular Material - Toolbar