轉載
在昨天介紹SideNav時墓卦，我們有稍微提到過Toolbar，今天我們就比較認真的來看看Material Design中Toolbar的特性蜒茄，及Angular Material中Toolbar可以呈現什麼樣的變化吧！

Material Design中的Toolbar

在Material Design的Toolbar設計指南中餐屎，Toolbar通常會浮動在整個系統(tǒng)的正上方檀葛，所有的內容應該從toolbar下放通過，除非是暫時性顯示的元件如dialog等等腹缩。我們可以把Toolbar當作整個系統(tǒng)的header(或footer)角色屿聋，在這裡放置品牌Logo、標題藏鹊、和一些簡單的執(zhí)行動作等等润讥。

開始使用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算是相對簡單的元件怔蚌，也因為他的簡單，給了開發(fā)人員更多的彈性空間去靈活調整旁赊，不管是在整個頁面架構上桦踊，還是系統(tǒng)內的功能畫面，都有很大的機會去使用到终畅，好好熟練Toolbar的用法對于功能畫面的開發(fā)會很有幫助喔籍胯！

明后天我們再來學習使用其他元件，來豐富這兩天學到的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