[Angular Material完全攻略] Day 04 - MatButton、MatButtonToggle和MatRipple

Posted 2023-03-25

参考技术A

今天我们要来介绍Angular Material按钮(button)的使用方法，按钮可以说是一切互动介面的基本，只要按下了按钮，所有事情都可能会发生，也因此设计良好的按钮是非常重要的，除了让事情发生外，也要让使用者能够明确的知道按钮背后的意义，今天就让我们看看Material Design中按钮的设计思维，以及如何在Angular Material如何轻易地达到这些设计的目标吧！

在 Material Design的Button的设计指南 中，按钮主要分为3种类型：

除了扁平化的按钮是为了在画面上有协调的感觉以外，其他的按钮设计都是为了凸显自身的存在，因此在设计上也都会呈现阴影的感觉，让视觉上更加清楚。

在Angular Material中，所有的按钮都放置在MatButtonModule中，因此使用时记得加入这个Module

由于按钮在网页上的存在极具意义，Angular Material在设计上并未把按钮封装成component，而是以directive的方式附著在 <button> 或 <a> 标签上，并透过样式的变化让原来的 <button> 或 <a> 标签具有Material Design的风格。

扁平化按钮是最基本的按钮样式，使用上非常简单，在原来的button或a标签上加上 mat-button 即可

这时候在画面上看起来会完全没有按钮的感觉，而只是个文字的存在，但当滑鼠移到按钮上时，则会看到比较深色的背景，按下去时则会产生互动的涟漪效果。

当然，我们也可以使用 color 属性来改变按钮的颜色，同时也可以使用 disabled 属性禁止按钮被点选。

效果如下：

比起扁平化的按钮，凸起的按钮会有明显的反差，也会有比较深的阴影效果，以凸显按钮的存在，凸起的按钮需要加上mat-raised-button

效果如下：

要替按钮加上Icon本身是一件很简单的事情，在标签内加上 <mat-icon> 就可以了，例如：

效果如下：

不过如果我想只想要icon，不要搭配文字呢？

结果：

这样有点问题的是，左右留白太多了好像有点浪费空间，毕竟只想要icon的按钮通常就是为了能够节省空间啊！这时候可以使用专门为了呈现icon的 mat-icon-button 来解决这个问题：

结果：

看起来就单纯许多，如果希望凸显这个按钮，我们可以先用 mat-raised-button 将它变成更明显的按钮，在使用 mat-icon-button 改变成为左右不留白的样式

结果：

可以看到按钮的留白就移除了，边角也变成了圆形的，只有Icon的单一按钮用这样的呈现方式感觉还不错！

接下来要介绍的是预设就是圆形的floating action button，我们使用到 mat-fab 这个directive：

效果如下：

可以发现一件事情，在没有指定颜色的时候， mat-fab 的样式与accent颜色是一样的，可以见得floating action button本身的设计理念就是为了凸显它的存在感，这刚好与accent的概念是用来强调这里有东西的颜色概念一样，不得不佩服Angular Material设想得非常周到。

mat-fab 本身应为圆形且要凸显的效果，整个按钮看起来会比较大，但对于比较小的区块中要使用时反而会显得太过突兀，这时候我们也可以使用 mat-mini-fab 来产生比较小的floating action button

跟原来的按钮比较效果如下：

mat-mini-fab 产生的按钮样式跟一般的按钮高度就会一样，因此看起来会跟使用 mat-raised-button 加上 mat-icon-button 的组合技有一样的效果，不过在语义上则是不一样的东西。

以上就是整个Angular Material中的按钮基本用法，并不会非常困难，主要就是几个directives，依照不同的情境决定使用方式；接下来要介绍的是类似按钮却不是按钮的东西，叫做按钮开关(button toggle)。

按钮开关基本上不是按钮，反而比较类似checkbox，偏偏它又不像checkbox是表单控制项，可以搭配ngModel使用，因此单一的按钮开关使用上会比较没有意义，而是使用一个群组式的按钮开关，应用层面比较广

mat-button-toggle 放在MatButtonToggleModule中，使用前记得加入这个Module，加入后我们可以直接在画面上使用

结果如下：

可以看到每次点下去，就有切换开关的效果。 mat-button-toggle 这个component本身还有如 checked、value、disabled 等属性可以使用，我们将在下一个Button Toggle Group中一起混著使用

mat-button-toggle-group 可以放置多个 mat-button-toggle ，并且依照被选取的mat-button-toggle来决定自己的值是什麽，我们可以设计一个简单的画面如下：

在上面的程式中，第一段ButtonToggleGroup中我们使用value为每个 mat-button-toggle 中设定所属的值，并且设定 checked="true" 来设定预设选取的效果、以及 disabled 来设定禁止点选，接著透过template reference取得ButtonToggleGroup的value值，也就是里面真正被开启的按钮值。

第二段ButtonToggleGroup中我们加入了 mutiple ，让里面的ButtonToggle可以复选，另外加上了 vertical="true" 改变排列方式，不过在复选时我们无法直接使用buttonToggleGroup.value来取得值，因此只能各自取得里面的ButtonToggle的选取状态。

效果如下：

关于ButtonToggleGroup中 mutiple 的设定，值得注意的是没有加上 mutiple 时，我们可以直接取用其中的value，来得到被选取的状态，同时也支援使用ngModel；加上 mutiple 后，由于不会有资料传入value中，因此ngModel也因此无法使用了。

详细的其他属性可以参考 ButtonToggle的API文件 。

介绍一个官方文件没有提到，但官方source code的demo app有示范的一个有趣的东西，也就是涟漪效果，这个效果主要用在按钮上面，在许多其他元件也可看到这个特效的踪影，在刚刚的介绍中我们也看到了按下按钮后会产生的特效；实际上这个特效有写成一个directive，让我们可以在不同地方使用，而且能调整许多细节。

首先加入MatRippleModule后，我们先来个简单的版本，直接用一个div并加上 mat-ripple 这个directive就好！

我们在这边加上了一个class的设定

position和transaition是必要的，其他可以依照情况设定，只要有这样的设定，立刻就可以为我们的画面加上涟漪效果啦！

除了基本的设定外， mat-ripple 还有其他属性可以设定，让画面呈现更加不一样，以下是 mat-ripple 的主要属性

例如以下程式码，我们可以在画面上产生数个粉红色且扩散速度慢的涟漪点。

结果如下：

我们也能从程式里面去直接触发涟漪的产生，如下：

ripple.launch 的前两个参数为涟漪点产生的位置，但目前这个计算会跑掉，所以我们在第三个参数中设定相关属性时将centered设为true，强制从中心点开始，另外这边我们加了一个persistent为true，代表涟漪点产生后不会自动淡出。我们可以透过 fadeOutAll() 把所有涟漪点都淡出。

效果如下：

是不是很有趣啊！

今天我们介绍了非常实用的元件－ 按钮 ，按钮可以说是一切互动的开始，透过按钮我们可以期待会有事情发生，而在Material Design中对于按钮的设计也是一门学问，如何在低调与奢华的按钮之间选择，影响了使用者对画面的观感。

除此之外我们也介绍了 开关型的按钮 ，这种按钮在特定的情境下会非常实用。

最后我们额外介绍了文件目前没有的 涟漪效果 ，这个效果在许多元件中都能看到，因此拉出来变成一个独立的directive也是件正常不过的事情，除此之外 mat-ripple 还能有许多更细部的设定，让效果更加丰富。

在介绍过几个实用的元件及功能后，明天开始我们就要开来组合各种元件，并且完成各式各样的画面啦！！

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

Angular Material 版本 (12.1.4) 与 Angular CDK 版本 (12.2.1) 不匹配。请确保这两个包的版本完全匹配

【中文标题】Angular Material 版本 (12.1.4) 与 Angular CDK 版本 (12.2.1) 不匹配。请确保这两个包的版本完全匹配

【英文标题】：The Angular Material version (12.1.4) does not match the Angular CDK version (12.2.1). Please ensure the versions of these two packages exactly match

【发布时间】：2021-10-16 20:48:56

【问题描述】：

使用此命令安装FlexLayout 后

npm i -s @angular/flex-layout @angular/cdk

显然也安装了Angular CDK，我收到以下警告

The Angular Material version (12.1.4) does not match the Angular CDK version (12.2.1).
Please ensure the versions of these two packages exactly match.

我使用ng update 命令来更新软件包，也尝试过ng add @angular/material，但我仍然使用相同的版本。

我该如何解决？

解决方案

命令ng add @angular/material & ng add @angular/material@latest 工作正常，我检查了package.json 文件并注意到我有

"dependencies": 
    ...
    "@angular/material": "^12.2.1"
    ... 

只是又需要一个ng serve。

还有一件事，似乎更新Angular Material 并没有真正覆盖styles.scss 文件，而是实际上将相同的代码再次添加到文件中，所以我也不得不删除它以摆脱scss 错误。

【参考方案1】：

尝试：

ng add @angular/material@latest

或

ng add @angular/material@12.2.1

【讨论】：

我更新了答案，问题解决了，谢谢。

很高兴为您提供帮助。