转载
在昨天介绍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
网友评论