轉(zhuǎn)載
在昨天介紹SideNav時(shí)，我們有稍微提到過(guò)Toolbar，今天我們就比較認(rèn)真的來(lái)看看Material Design中Toolbar的特性，及Angular Material中Toolbar可以呈現(xiàn)什麼樣的變化吧！

Material Design中的Toolbar

在Material Design的Toolbar設(shè)計(jì)指南中，Toolbar通常會(huì)浮動(dòng)在整個(gè)系統(tǒng)的正上方，所有的內(nèi)容應(yīng)該從toolbar下放通過(guò)，除非是暫時(shí)性顯示的元件如dialog等等。我們可以把Toolbar當(dāng)作整個(gè)系統(tǒng)的header(或footer)角色，在這裡放置品牌Logo、標(biāo)題、和一些簡(jiǎn)單的執(zhí)行動(dòng)作等等。

開(kāi)始使用Angular Material中的Toolbar

Toolbar的元件放置在MatToolbarModule之中，加入這個(gè)module后，我們可以使用mat-toolbar在畫(huà)面上呈現(xiàn)一個(gè)簡(jiǎn)單的toolbar

<mat-toolbar>
  <span>IT鐵人賽－Angular Material Demo</span>
</mat-toolbar>

效果如下：

image

可以看到我們已經(jīng)加入一個(gè)簡(jiǎn)單的toolbar了，不過(guò)這樣還有點(diǎn)小小問(wèn)題，就是我們的toolbar沒(méi)有浮動(dòng)在畫(huà)面的最上方，隨著畫(huà)面卷動(dòng)，toolbar會(huì)消失在畫(huà)面之中，由于toolbar只是一個(gè)component，可以在畫(huà)面中的任何地方加入，因此直接強(qiáng)制顯示在畫(huà)面的最上方在元件設(shè)計(jì)上也好像怪怪的，但這只是元件設(shè)計(jì)上的問(wèn)題而已，要讓這個(gè)toolbar固定在最上方其實(shí)也不困難，設(shè)定一下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固定在上方，并透過(guò)z-index: 2來(lái)避免卷動(dòng)時(shí)被下方內(nèi)容蓋過(guò)， mat-sidenav-container跟mat-sidenav喬出一個(gè)上方64px的空間給toolbar使用，避免內(nèi)容被toolbar蓋過(guò)。

接著將原來(lái)的元件套上這些樣式

<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>

需要特別注意的是，前一天我們?cè)?code>mat-sidenav設(shè)定了fixedInViewport，在CSS調(diào)整后這個(gè)屬性會(huì)造成sidenav顯示跑掉，因此我們要這個(gè)設(shè)定拿掉，目前GitHub上已有Issue在討論了，希望之后會(huì)調(diào)整蘿。

成果如下：

image

設(shè)定Toolbar的樣式

跟其他Angular Material元件一樣，我們可以透過(guò)color來(lái)改變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加上一些東西，第一個(gè)是在左邊加上一個(gè)icon，可以透過(guò)這個(gè)icon來(lái)開(kāi)關(guān)SideNav，這是一種很常見(jiàn)的后臺(tái)做法

<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的最右邊加上一個(gè)登出的按鈕，不過(guò)要怎麼把按鈕推到最右邊去呢，其實(shí)只要透過(guò)CSS就可以輕易解決，由于Toolbar內(nèi)的排版是flex，我們可以加入一個(gè)分隔用的空間，把空間后的內(nèi)容都推到另外一邊去。

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

接著在toolbar中加入這個(gè)分隔器

<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>

  <!-- 在這之后的都會(huì)被推到右邊去 -->
  <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>

效果如下：

一個(gè)有模有樣的toolbar就出現(xiàn)啦！

多行的Toolbar

Toolbar預(yù)設(shè)是單行的，在mat-toolbar中的內(nèi)容預(yù)設(shè)都會(huì)在同一行顯示，若在一行toolbar中放入太多資訊則可能會(huì)因?yàn)閷挾扔邢薜年P(guān)系無(wú)法顯示，這時(shí)候我們可以用多個(gè)<mat-toolbar-row>來(lái)設(shè)定多行的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>

效果如下：

乍看之下跟用多個(gè)<mat-toolbar>很類似，但<mat-toolbar-row>本身是沒(méi)有color可以設(shè)定的，而是跟隨著mat-toolbar走，另外在語(yǔ)義上也有所不同，在CSS狀況比較複雜時(shí)，也可能造成畫(huà)面錯(cuò)亂的問(wèn)題，因此應(yīng)該看情境決定使用的時(shí)機(jī)。

本日小結(jié)

今天我們學(xué)會(huì)了另一個(gè)前端上常用的元件－Toolbar，Toolbar算是相對(duì)簡(jiǎn)單的元件，也因?yàn)樗暮?jiǎn)單，給了開(kāi)發(fā)人員更多的彈性空間去靈活調(diào)整，不管是在整個(gè)頁(yè)面架構(gòu)上，還是系統(tǒng)內(nèi)的功能畫(huà)面，都有很大的機(jī)會(huì)去使用到，好好熟練Toolbar的用法對(duì)于功能畫(huà)面的開(kāi)發(fā)會(huì)很有幫助喔！

明后天我們?cè)賮?lái)學(xué)習(xí)使用其他元件，來(lái)豐富這兩天學(xué)到的SideNav和Toolbar的內(nèi)容吧！

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

分支：day-06-toolbar

相關(guān)資源

• Material Design - Toolbars
• Angular Material - Toolbar