angular5+ 之如何用material的UI库组件构建你的web页面

开拓新专题，探索angular6, Rxjs6, material UI, Ionic, GraphQL,WebGL,PWA... 啥最新咱讲啥，紧跟时代的屁股。

material

angular material简介
安装项目搭建相关包import
components组件过一遍
实例GIF图展示
为CDK做下期分解铺垫

本以为Ionic可以走遍天下，果然too young too naive
木事木事。不都是UI库嘛，撸起袖子npm 走起来，转战web端UI库，不信干不过，
node的2.0版本 deno都出来了，谁都别拉我，我还能继续学，谁拉我跟谁急

人家deno作者辣么谦虚：deno取自Design mistakes node

我。。。大神果然是用来膜拜的，恩...

学不动系列

我某某同事随口那么一提：还是ant-design 好用
我.... (的内心：这又是啥???）

ant-design，移动端设计规范，主要作为产品、设计师、工程师学习产品交互设计的一种工具，用起来和前端的UI框架库类似

中文链接： ant-design
国际范英文版 ant-design

OK，改天有空再扯远点，毕竟今天的主题是material

angular material官网

注意：谷歌Material Design在如今的前端页面设计中非常流行。Material Design的设计风格向我们展示了一个简单而有内涵的现代UI设计方案。该框架有很多优秀的子框架：Materialize， Angular Material，Material UI，MUI CSS框架，Polymer，其中angular material才是我们今天要讲的主题

步骤：

1.前期准备：npm, angular cli脚手架，
1. 自建新项目：

ng new my-app //angular项目名字
ng g c test  //组件名test

1. 安装angular material 和angular cdk

//npm 方法
npm install --save @angular/material @angular/cdk
//或者 yarn方法
yarn add @angular/material @angular/cdk

//或者使用snapshot中build，但是不建议，目前还不稳定，担心在解压阶段会时不时的崩溃一下下

//npm
npm install --save angular/material2-builds angular/cdk-builds
//yarn
yarn add angular/material2-builds angular/cdk-builds

1. 常用项 animations(非必备)

//npm
npm install --save @angular/animations
//yarn
yarn add @angular/animations

//在你想用的组件里再import进去，我这里展示在app根组件里
//app.module.ts:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

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

5.引入组件模块
* 为了后续支持使用NgModule

//随你的需求在需要的地方引入，这里在根组件app里
//app.module.ts:
import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
exports: [MatButtonModule, MatCheckboxModule], 
//如果只想这一个组件自己单独用，就不用添加这export，如果还想给自己的子组件(eg:test)，就要export出去
  ...
})
export class AppModule { }

引入主题

//根目录里的styles.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
// 或者直接<link>标签到index.html里
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

1. 手势支持
  
  有的标签(eg:mat-slide-toggle, mat-slider, mattooltip 等)需要hammerJS来支持，为了获取这些组件的所有特性，通过npm,CDN来引入到项目中

//npm
npm install --save hammerjs
//yarn
yarn add hammerjs

上面下载好后，在你的入口文件中引入(eg:main.ts)

import 'hammerjs';

1. (可选)添加material 的icon
  如果你想要你的mat-icon标签获取到官方的Material Design Icons，在index.html文件中加入下面的link

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

OK，至此为止，该引入的都已经引入好了，现在我们简单讲一下material的组件components

一共分为六大类

Components	组件
Form Controls	表单控件
Navigation	导航
Layout	布局
Buttons & Indicators	按钮 & 指示器
Popups & Moduals	弹框 & 提示框
Data table	数据表格

我们来点实际的，挑几个胸大屁股翘得漂亮GIF动态components组件show一下，啧啧，爽哉

一、Form Controls | 表单控件

自带模糊查询功能的输入框

自带模糊查询功能的输入框
完胜各种日期插件，曾经的什么laydate，Wdatepicker日期控件，一去不复返咯
年月日，/-连接格式随意切换，中英日法德语言开心就好，想大就大....你想要的日期方式，我这里都有~~~

你想要的日期方式我都有

大大大，老花眼也不怕

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #picker></mat-datepicker>
</mat-form-field>

花样百变的grid栅格系统，听话，咱不学bootstrap

//html文件
<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

//GridListDynamicExample组件ts文件
export class GridListDynamicExample { 
  tiles = [
    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
  ];
}

自带动画特效的tab栏切换
* 就喜欢你看不惯我天生丽质又干不掉我的样子

天生自带animations

tab切换

  //哼，人家material的tag标签自带这些特征，
<mat-tab-group>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

stepper分布器

垂直版，跟我一步步填写注册信息吧
风琴式的展开折叠框

手风琴啊手风琴
令人抓狂的loading加载圈圈

转啊转

//相信我，就这一个标签搞定
<mat-spinner></mat-spinner>

或者是直线型的进度条，莫名的快感，比圈圈舒服多了

进度条
字体图标
说到字体图标，就来劲，SVG啊！大爱，矢量图，代码操作，简单易懂，再加上anime.js，两行搞定

这个我要单独拎出来一篇文章讲一讲!，先放官方链接 MATERIAL DESIGN Icons

icon fonts后面还有好多，暂不展示了，等着我放大招

简约版的对话框
同事用的时候遇到了点小问题，说这个dialog弹出的时候页面会有向上的位移，emmm，明儿好好研究一下下~~~

分分钟animation的赶脚
经典款hover悬空出现提示文本
想当初暂用jquery的时候，还要用什么hover，toggle，trigger....各种点击事件，现在好咯分分钟都是设计感。

彻底臣服拜倒在angular material裙下

<mat-form-field class="example-user-input">
  <mat-select placeholder="Tooltip position" [formControl]="position">
    <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
      {{ positionOption }}
    </mat-option>
  </mat-select>
</mat-form-field>

<button mat-raised-button
        matTooltip="Info about the action"
        [matTooltipPosition]="position.value"
        aria-label="Button that displays a tooltip in various positions">
  Action
</button>

该子组件TooltipPositionExample 的ts文件

export class TooltipPositionExample { 
  positionOptions: TooltipPosition[] = ['after', 'before', 'above', 'below', 'left', 'right'];
  position = new FormControl(this.positionOptions[0]);
}

摊手状

完美主义者的分页
以前用PHP结合bootstrap到腾出一个一次显示7个数据的分页功能就激动得3天睡不着觉，，，，(傻缺，啊呸、单纯的时光们吖)

下一页下一页

//就这么点代码就实现了分页，别拦我，我要去撞墙了
<mat-paginator [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

动态的表格排序

升序or降序，这是一个问题

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

大总结

相信官方文档的力量，最科学，最快的'捷径'
框架都是在不断更新的，以不变应万变，才不会出现‘学不动’ 的状态
再好的组件也是基于咱们JavaScript基础语法，基础扎实，才能走得远
至于angular material 的CDK，后续研究更新中，嘤嘤嘤。。。