button

button是我们平时用的最多的交互形式，按下按钮，发生事件。是我们最基本的交互，在Material Design中将button分成了3种

1· 浮动按钮(Flat Button)，主要是作为一个次级交互，平时不用，用的时候还挺方便的。

2·凸起的按钮(Raised Button),主要用在比较醒目的位置提醒用户，比如加入购物车，写文章。

3· 浮动的操作按钮，一般是在某个功能块或者整个屏幕的某个固定位置，显示常用功能，类似快速链接

Angular Material中使用按钮

由于之前我们在AppModule已经引入的MatButtonModule，就不需要重新引入了，我把代码再放一下。

import { MatButtonModule } from '@angular/material';@NgModule({  ...  imports: [    ...,    MatButtonModule],  ...})export class AppModule {}复制代码

因为button在网页中的特殊地位，Angular Material并没有将它封装为组件(component),而是以指令(directive)的形式封装起来的。使用方法也很简单，只要将指令放在对应的button或者a标签上就可以了

复制代码

在按下的时候还会出现涟漪的效果

当然最基本的颜、禁用和a标签肯定也是支持的

        Link复制代码

然后是凸起的按钮(mat-raised-button)

Link复制代码

Icon按钮

复制代码

也可以加字

复制代码

或者是不是有点太占用空间了直接不要边框了

复制代码

emm 还是带点凸起吧

复制代码

是不是感觉立体感没那么强了，来来给，给你介绍下浮动动作按钮（mat-fab / mat-min-fab）

        复制代码

有点大了没事还提供了mini号

复制代码

好的看一下对比吧

开关按钮（button-toggle）作用是checkbox的一个button 首先我们得加入这个module

MatButtonToggleModul复制代码

之前加过了，大家都知道了吧然后在html中加入


    
     我是个开关
    复制代码

每次点击都有切换开关的效果来个综合的


      
       
         
      
       format_align_left
        
       
       
         
      
       format_align_center
        
       
         
      
       format_align_right
        
       
       
         
      
       format_align_justify
        
     
    
    
     对齐方式：{
   { formatAlignGroup.value }}
    
    
    
      
         
      
       format_bold
        
       
         
      
       format_italic
        
       
         
      
       format_underlined
        
     
    
    
     粗体：{
   { buttonToggleBold.checked }}、斜体：{
   { buttonToggleItalic.checked }}、底线：{
   { buttonToggleUnderlined.checked }}
    
复制代码

涟漪效果

最后来个小惊喜在官方的source code的demo app里有这么一个指令mat-ripple 加上之后就能有我们之前点击出现的像水波纹一样扩散的效果首先我们加入这个module

MatRippleModule复制代码

随后我们在html中加入


    
复制代码

再然后加入样式

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

其中transition和position是必须的，其他的根据情况来看一下是不是有效果了

属性	默认值	描述
matRippleCentered	true	代表不管滑鼠在元件上的哪裡點下去，都會從中心點開始產生漣漪。
matRippleDisabled	true	代表取消元件上的漣漪效果。
matRippleUnbounded	true	代表漣漪的效果擴大後會超過元件之外。
matRippleRadius	number	漣漪產生的大小，數值越大大表大小越大。
matRippleCol		漣漪的顏色。
matRippleSpeedFactor		漣漪擴散的速度，數值越大速度越快

我们可以这么用


    
复制代码

我们也可以直接用代码去处罚这个效果我们在Component引入MatRipple

import {MatRipple} from '@angular/material';复制代码

然后使用ViewChild选择它

@ViewChild(MatRipple) ripple: MatRipple;复制代码

然后编写我们的操作函数

/**   * 触发涟漪   * ripple.launch的前两个参数是涟漪中心产生的位置，但目前这个定位有时候会不准，所以我们在第三个参数中设定相关属性时将centered设为true，   * 强制从中心开始，另外这边我们加了一个persistent为true，代表涟漪产生后不会自动消失。   */  triggerRipple() {    const point1 = this.ripple.launch(0, 0, { color: 'pink', centered: true, persistent: true, radius: 50 });    setTimeout(() => {      point1.fadeOut();    }, 500);  }  /**   * 关闭涟漪   * fadeOutAll()把所有涟漪效果都退出   */  clearRipple() {    this.ripple.fadeOutAll();  }复制代码