今天我們要來(lái)介紹Angular Material按鈕(button)的使用方法，按鈕可以說(shuō)是一切互動(dòng)介面的基本止吐，只要按下了按鈕宝踪，所有事情都可能會(huì)發(fā)生，也因此設(shè)計(jì)良好的按鈕是非常重要的碍扔，除了讓事情發(fā)生外瘩燥，也要讓使用者能夠明確的知道按鈕背后的意義，今天就讓我們看看Material Design中按鈕的設(shè)計(jì)思維不同，以及如何在A(yíng)ngular Material如何輕易地達(dá)到這些設(shè)計(jì)的目標(biāo)吧厉膀！

關(guān)于Material Design的按鈕

在Material Design的Button的設(shè)計(jì)指南中，按鈕主要分為3種類(lèi)型：

1. 扁平化按鈕(Flat Button) ：一個(gè)基本的文字矩形，通常使用在dialog站蝠、toolbar之中汰具，顏色很簡(jiǎn)單，在不是以按鈕為主的元件中這些按鈕扮演著配角的角色菱魔，讓你不會(huì)過(guò)度的注意它留荔，但在需要時(shí)又能明顯知道它的存在
2. 凸起的按鈕(Raised Button) ：具有陰影且明顯的按鈕，在畫(huà)面上會(huì)比較有立體感澜倦、甚至是一個(gè)明顯的色塊聚蝶，會(huì)跟其他扁平化的元素產(chǎn)生不同空間的感覺(jué)，因此在視覺(jué)上會(huì)非常具有存在感藻治，適合用在需要提醒使用者按下的地方碘勉，例如加入購(gòu)物車(chē)這種的按鈕就很適合使用。
3. 浮動(dòng)的動(dòng)作按鈕(Floatng Action Button) ：Floating Action Button是Material Design中非常重要且獨(dú)特的一種設(shè)計(jì)方式桩卵，重要到在官方的設(shè)計(jì)指南中有獨(dú)立的一個(gè)完整篇章在介紹它验靡，它通常會(huì)固定在整個(gè)螢?zāi)换蚴悄硞€(gè)功能區(qū)快的固定位置，用來(lái)提醒使用者這個(gè)按鈕具有(或包含)畫(huà)面上最常使用到的功能雏节，也可以想像成是一種捷徑的概念胜嗓。為了凸顯這種按鈕的存在，又要避免存在有著突兀的感覺(jué)钩乍，因此會(huì)設(shè)計(jì)成圓形但不會(huì)太佔(zhàn)空間的按鈕辞州，也因此基本上按鈕中只會(huì)放置Icon，比較少會(huì)放文字寥粹。

image.png

除了扁平化的按鈕是為了在畫(huà)面上有協(xié)調(diào)的感覺(jué)以外变过，其他的按鈕設(shè)計(jì)都是為了凸顯自身的存在，因此在設(shè)計(jì)上也都會(huì)呈現(xiàn)陰影的感覺(jué)涝涤，讓視覺(jué)上更加清楚媚狰。

在A(yíng)ngular Material中使用按鈕

在A(yíng)ngular Material中，所有的按鈕都放置在MatButtonModule中妄痪，因此使用時(shí)記得加入這個(gè)Ｍodule

import { MatButtonModule } from '@angular/material';

@NgModule({
  ...
  imports: [
    ...,
    MatButtonModule],
  ...
})
export class AppModule {}

由于按鈕在網(wǎng)頁(yè)上的存在極具意義哈雏，Angular Material在設(shè)計(jì)上并未把按鈕封裝成component楞件，而是以directive的方式附著在<button>或<a>標(biāo)籤上衫生，并透過(guò)樣式的變化讓原來(lái)的<button>或<a>標(biāo)籤具有Material Design的風(fēng)格。

扁平化按鈕(mat-button)

扁平化按鈕是最基本的按鈕樣式土浸，使用上非常簡(jiǎn)單罪针，在原來(lái)的button或a標(biāo)籤上加上mat-button即可

<button mat-button>我是按鈕</button>

這時(shí)候在畫(huà)面上看起來(lái)會(huì)完全沒(méi)有按鈕的感覺(jué)，而只是個(gè)文字的存在黄伊，但當(dāng)滑鼠移到按鈕上時(shí)泪酱，則會(huì)看到比較深色的背景，按下去時(shí)則會(huì)產(chǎn)生互動(dòng)的漣漪效果。

當(dāng)然墓阀，我們也可以使用color屬性來(lái)改變按鈕的顏色毡惜，同時(shí)也可以使用disabled屬性禁止按鈕被點(diǎn)選。

  <button mat-button>我是按鈕</button>
  <button mat-button color="primary">Primary</button>
  <button mat-button color="accent">Accent</button>
  <button mat-button color="warn">Warn</button>
  <button mat-button disabled>Disabled</button>
  <a mat-button>Link</a> <!-- 放在a tag裡面也沒(méi)問(wèn)題 -->

效果如下：

image.png

凸起的按鈕(mat-raised-button)

比起扁平化的按鈕斯撮，凸起的按鈕會(huì)有明顯的反差经伙，也會(huì)有比較深的陰影效果，以凸顯按鈕的存在勿锅，凸起的按鈕需要加上mat-raised-button

  <button mat-raised-button>我是raised按鈕</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-button>Link</a>

效果如下：

image.png

Icon按鈕

要替按鈕加上Icon本身是一件很簡(jiǎn)單的事情帕膜，在標(biāo)籤內(nèi)加上<mat-icon>就可以了，例如：

<button mat-raised-button color="primary"><mat-icon>thumb_up</mat-icon> 我有Icon</button>

效果如下：

image.png

不過(guò)如果我想只想要icon溢十，不要搭配文字呢垮刹？

<button mat-raised-button color="primary"><mat-icon>thumb_up</mat-icon></button>

結(jié)果：

image.png

這樣有點(diǎn)問(wèn)題的是，左右留白太多了好像有點(diǎn)浪費(fèi)空間张弛，畢竟只想要icon的按鈕通常就是為了能夠節(jié)省空間盎牡洹！這時(shí)候可以使用專(zhuān)門(mén)為了呈現(xiàn)icon的mat-icon-button來(lái)解決這個(gè)問(wèn)題：

<button mat-icon-button color="primary"><mat-icon>thumb_up</mat-icon></button>

結(jié)果：

image.png

看起來(lái)就單純?cè)S多吞鸭，如果希望凸顯這個(gè)按鈕种蝶，我們可以先用mat-raised-button將它變成更明顯的按鈕，在使用mat-icon-button改變成為左右不留白的樣式

<button mat-raised-button mat-icon-button color="primary"><mat-icon>thumb_up</mat-icon></button>

結(jié)果：

image.png

可以看到按鈕的留白就移除了瞒大，邊角也變成了圓形的螃征，只有Icon的單一按鈕用這樣的呈現(xiàn)方式感覺(jué)還不錯(cuò)！

浮動(dòng)的動(dòng)作按鈕(mat-fab / mat-min-fab)

接下來(lái)要介紹的是預(yù)設(shè)就是圓形的floating action button透敌，我們使用到mat-fab這個(gè)directive：

  <button mat-fab>
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-fab color="primary">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-fab color="accent">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-fab color="warn">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-fab disabled>
    <mat-icon>thumb_up</mat-icon>
  </button>

效果如下：

image

可以發(fā)現(xiàn)一件事情盯滚，在沒(méi)有指定顏色的時(shí)候，mat-fab的樣式與accent顏色是一樣的酗电，可以見(jiàn)得floating action button本身的設(shè)計(jì)理念就是為了凸顯它的存在感魄藕，這剛好與accent的概念是用來(lái)強(qiáng)調(diào)這裡有東西的顏色概念一樣，不得不佩服Angular Material設(shè)想得非常周到撵术。

mat-fab本身應(yīng)為圓形且要凸顯的效果背率，整個(gè)按鈕看起來(lái)會(huì)比較大，但對(duì)于比較小的區(qū)塊中要使用時(shí)反而會(huì)顯得太過(guò)突兀嫩与，這時(shí)候我們也可以使用mat-mini-fab來(lái)產(chǎn)生比較小的floating action button

  <button mat-mini-fab>
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-mini-fab color="primary">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-mini-fab color="accent">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-mini-fab color="warn">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-mini-fab disabled>
    <mat-icon>thumb_up</mat-icon>
  </button>

跟原來(lái)的按鈕比較效果如下：

image.png

mat-mini-fab產(chǎn)生的按鈕樣式跟一般的按鈕高度就會(huì)一樣寝姿，因此看起來(lái)會(huì)跟使用mat-raised-button加上mat-icon-button的組合技有一樣的效果，不過(guò)在語(yǔ)義上則是不一樣的東西划滋。

以上就是整個(gè)Angular Material中的按鈕基本用法饵筑，并不會(huì)非常困難，主要就是幾個(gè)directives处坪，依照不同的情境決定使用方式根资；接下來(lái)要介紹的是類(lèi)似按鈕卻不是按鈕的東西架专，叫做按鈕開(kāi)關(guān)(button toggle)。

按鈕開(kāi)關(guān)(button toggle)

按鈕開(kāi)關(guān)基本上不是按鈕玄帕，反而比較類(lèi)似checkbox部脚，偏偏它又不像checkbox是表單控制項(xiàng)，可以搭配ngModel使用裤纹，因此單一的按鈕開(kāi)關(guān)使用上會(huì)比較沒(méi)有意義睛低，而是使用一個(gè)群組式的按鈕開(kāi)關(guān)，應(yīng)用層面比較廣

基本的Button Toggle(mat-button-toggle)

mat-button-toggle放在MatButtonToggleModule中服傍，使用前記得加入這個(gè)Module钱雷，加入后我們可以直接在畫(huà)面上使用

<mat-button-toggle>我是個(gè)開(kāi)關(guān)</mat-button-toggle>

結(jié)果如下：

image

可以看到每次點(diǎn)下去，就有切換開(kāi)關(guān)的效果吹零。mat-button-toggle這個(gè)component本身還有如checked罩抗、value、disabled等屬性可以使用灿椅，我們將在下一個(gè)Button Toggle Group中一起混著使用

搭配Button Toggle Group(mat-button-toggle-group)

mat-button-toggle-group可以放置多個(gè)mat-button-toggle套蒂，并且依照被選取的mat-button-toggle來(lái)決定自己的值是什麼，我們可以設(shè)計(jì)一個(gè)簡(jiǎn)單的畫(huà)面如下：

<mat-button-toggle-group #formatAlignGroup="matButtonToggleGroup">
  <!-- button toogle所代表的值 -->
  <mat-button-toggle value="left">
    <mat-icon>format_align_left</mat-icon>
  </mat-button-toggle>
  <!-- 預(yù)設(shè)被選取 -->
  <mat-button-toggle value="center" checked="true">
    <mat-icon>format_align_center</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="right">
    <mat-icon>format_align_right</mat-icon>
  </mat-button-toggle>
  <!-- 不允許選擇的button toggle -->
  <mat-button-toggle value="justify" disabled>
    <mat-icon>format_align_justify</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>
<div>對(duì)齊方式為：{{ formatAlignGroup.value }}</div>

<!-- 加上multiple茫蛹，則裡面的mat-buttong-toggle可以複選 -->
<!-- 加上vertical="true", 改變排列方式 -->
<mat-button-toggle-group multiple vertical="true">
  <mat-button-toggle value="bold" #buttonToggleBold>
    <mat-icon>format_bold</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="italic" checked="true" #buttonToggleItalic>
    <mat-icon>format_italic</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="underlined" checked="true" #buttonToggleUnderlined>
    <mat-icon>format_underlined</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>
<div>粗體：{{ buttonToggleBold.checked }}操刀、斜體：{{ buttonToggleItalic.checked }}、底線(xiàn)：{{ buttonToggleUnderlined.checked }}</div>

在上面的程式中婴洼，第一段ButtonToggleGroup中我們使用value為每個(gè)mat-button-toggle中設(shè)定所屬的值骨坑，并且設(shè)定checked="true"來(lái)設(shè)定預(yù)設(shè)選取的效果、以及disabled來(lái)設(shè)定禁止點(diǎn)選柬采，接著透過(guò)template reference取得ButtonToggleGroup的value值欢唾，也就是裡面真正被開(kāi)啟的按鈕值。

第二段ButtonToggleGroup中我們加入了mutiple粉捻，讓裡面的ButtonToggle可以複選礁遣，另外加上了vertical="true"改變排列方式，不過(guò)在複選時(shí)我們無(wú)法直接使用buttonToggleGroup.value來(lái)取得值肩刃，因此只能各自取得裡面的ButtonToggle的選取狀態(tài)祟霍。

效果如下：

image

關(guān)于ButtonToggleGroup中mutiple的設(shè)定，值得注意的是沒(méi)有加上mutiple時(shí)盈包，我們可以直接取用其中的value沸呐，來(lái)得到被選取的狀態(tài)，同時(shí)也支援使用ngModel续语；加上mutiple后垂谢，由于不會(huì)有資料傳入value中，因此ngModel也因此無(wú)法使用了疮茄。

詳細(xì)的其他屬性可以參考ButtonToggle的API文件滥朱。

漣漪效果(mat-ripple)

介紹一個(gè)官方文件沒(méi)有提到，但官方source code的demo app有示范的一個(gè)有趣的東西力试，也就是漣漪效果徙邻，這個(gè)效果主要用在按鈕上面，在許多其他元件也可看到這個(gè)特效的蹤影畸裳，在剛剛的介紹中我們也看到了按下按鈕后會(huì)產(chǎn)生的特效缰犁；實(shí)際上這個(gè)特效有寫(xiě)成一個(gè)directive，讓我們可以在不同地方使用怖糊，而且能調(diào)整許多細(xì)節(jié)帅容。

首先加入MatRippleModule后，我們先來(lái)個(gè)簡(jiǎn)單的版本伍伤，直接用一個(gè)div并加上mat-ripple這個(gè)directive就好并徘！

<div class="demo-ripple-container" mat-ripple>

我們?cè)谶@邊加上了一個(gè)class的設(shè)定

.demo-ripple-container {
  height: 150px;
  width: 200px;
  position: relative;
  transition: all 200ms linear;
  border: 1px solid black;
}

position和transaition是必要的，其他可以依照情況設(shè)定扰魂，只要有這樣的設(shè)定麦乞，立刻就可以為我們的畫(huà)面加上漣漪效果啦！

image

mat-ripple的其他屬性

除了基本的設(shè)定外劝评，mat-ripple還有其他屬性可以設(shè)定姐直，讓畫(huà)面呈現(xiàn)更加不一樣，以下是mat-ripple的主要屬性

• matRippleCentered：true代表不管滑鼠在元件上的哪裡點(diǎn)下去蒋畜，都會(huì)從中心點(diǎn)開(kāi)始產(chǎn)生漣漪声畏。

• matRippleDisabled：true代表取消元件上的漣漪效果。

• matRippleUnbounded：true代表漣漪的效果擴(kuò)大后會(huì)超過(guò)元件之外姻成。

  image

• matRippleRadius：漣漪產(chǎn)生的大小砰识，數(shù)值越大大表大小越大。

• matRippleCol：漣漪的顏色佣渴。

• matRippleSpeedFactor：漣漪擴(kuò)散的速度辫狼，數(shù)值越大速度越快

例如以下程式碼，我們可以在畫(huà)面上產(chǎn)生數(shù)個(gè)粉紅色且擴(kuò)散速度慢的漣漪點(diǎn)辛润。

<div class="demo-ripple-container" mat-ripple
[matRippleCentered]="false"
[matRippleDisabled]="false"
[matRippleUnbounded]="false"
[matRippleRadius]="10"
[matRippleColor]="'pink'"
[matRippleSpeedFactor]="0.5"></div>

結(jié)果如下：

image

從程式觸發(fā)漣漪的效果

我們也能從程式裡面去直接觸發(fā)漣漪的產(chǎn)生膨处，如下：

export class AppComponent implements OnInit {
  @ViewChild(MatRipple) ripple: MatRipple;

  triggerRipple() {
    const point1 = this.ripple.launch(0, 0, { color: 'pink', centered: true, persistent: true, radius: 50 });
    const point2 = this.ripple.launch(0, 0, { color: 'yellow', centered: true, persistent: true, radius: 20 });

    setTimeout(() => {
      point1.fadeOut();      
    }, 500);
  }

  clearRipple() {
    this.ripple.fadeOutAll();
  }
}

ripple.launch的前兩個(gè)參數(shù)為漣漪點(diǎn)產(chǎn)生的位置，但目前這個(gè)計(jì)算會(huì)跑掉砂竖，所以我們?cè)诘谌齻€(gè)參數(shù)中設(shè)定相關(guān)屬性時(shí)將centered設(shè)為true真椿，強(qiáng)制從中心點(diǎn)開(kāi)始，另外這邊我們加了一個(gè)persistent為true乎澄，代表漣漪點(diǎn)產(chǎn)生后不會(huì)自動(dòng)淡出突硝。我們可以透過(guò)fadeOutAll()把所有漣漪點(diǎn)都淡出。

效果如下：

image

是不是很有趣爸眉谩解恰！

本日小結(jié)

今天我們介紹了非常實(shí)用的元件－按鈕锋八，按鈕可以說(shuō)是一切互動(dòng)的開(kāi)始，透過(guò)按鈕我們可以期待會(huì)有事情發(fā)生护盈，而在Material Design中對(duì)于按鈕的設(shè)計(jì)也是一門(mén)學(xué)問(wèn)挟纱，如何在低調(diào)與奢華的按鈕之間選擇，影響了使用者對(duì)畫(huà)面的觀(guān)感腐宋。

除此之外我們也介紹了開(kāi)關(guān)型的按鈕紊服，這種按鈕在特定的情境下會(huì)非常實(shí)用。

最后我們額外介紹了文件目前沒(méi)有的漣漪效果胸竞，這個(gè)效果在許多元件中都能看到欺嗤，因此拉出來(lái)變成一個(gè)獨(dú)立的directive也是件正常不過(guò)的事情，除此之外mat-ripple還能有許多更細(xì)部的設(shè)定卫枝，讓效果更加豐富煎饼。

在介紹過(guò)幾個(gè)實(shí)用的元件及功能后，明天開(kāi)始我們就要開(kāi)來(lái)組合各種元件剃盾，并且完成各式各樣的畫(huà)面啦Ｏ僬肌！

本日的程式碼GitHub：https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-04-mat-button
分支：day-04-mat-button

相關(guān)資源

• Material Design - Buttons
• Material Design - Floating Ation Button
• Angular Material - Button
• Angular Material - Button Toggle
• Angular Material - Demo App - Ripple