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 走起來，轉(zhuǎn)戰(zhàn)web端UI庫类咧，不信干不過馒铃，
node的2.0版本 deno都出來了，誰都別拉我痕惋，我還能繼續(xù)學，誰拉我跟誰急

人家deno作者辣么謙虛：deno取自Design mistakes node

我娃殖。值戳。。大神果然是用來膜拜的炉爆，恩...

學不動系列

我某某同事隨口那么一提：還是ant-design 好用
我.... (的內(nèi)心：這又是啥???）

ant-design堕虹，移動端設計規(guī)范，主要作為產(chǎn)品芬首、設計師赴捞、工程師學習產(chǎn)品交互設計的一種工具，用起來和前端的UI框架庫類似

中文鏈接： ant-design
國際范英文版 ant-design

OK郁稍，改天有空再扯遠點赦政，畢竟今天的主題是material

angular material官網(wǎng)

注意：谷歌Material Design在如今的前端頁面設計中非常流行。Material Design的設計風格向我們展示了一個簡單而有內(nèi)涵的現(xiàn)代UI設計方案。該框架有很多優(yōu)秀的子框架：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靡羡，但是不建議系洛，目前還不穩(wěn)定，擔心在解壓階段會時不時的崩潰一下下

//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.引入組件模塊
* 為了后續(xù)支持使用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  rel="stylesheet">

OK岔帽，至此為止玫鸟，該引入的都已經(jīng)引入好了，現(xiàn)在我們簡單講一下material的組件components

一共分為六大類

Components	組件
Form Controls	表單控件
Navigation	導航
Layout	布局
Buttons & Indicators	按鈕 & 指示器
Popups & Moduals	彈框 & 提示框
Data table	數(shù)據(jù)表格

我們來點實際的犀勒，挑幾個胸大屁股翹得漂亮GIF動態(tài)components組件show一下屎飘，嘖嘖，爽哉

一贾费、Form Controls | 表單控件

自帶模糊查詢功能的輸入框

自帶模糊查詢功能的輸入框
完勝各種日期插件钦购，曾經(jīng)的什么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柵格系統(tǒng)谎痢，聽話磕昼，咱不學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欄切換
* 就喜歡你看不慣我天生麗質(zhì)又干不掉我的樣子

天生自帶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加載圈圈

轉(zhuǎn)啊轉(zhuǎn)

//相信我，就這一個標簽搞定
<mat-spinner></mat-spinner>

或者是直線型的進度條，莫名的快感纫骑，比圈圈舒服多了

進度條
字體圖標
說到字體圖標蝎亚，就來勁，SVG跋裙荨发框！大愛，矢量圖煤墙，代碼操作梅惯，簡單易懂，再加上anime.js仿野，兩行搞定

這個我要單獨拎出來一篇文章講一講!铣减，先放官方鏈接 MATERIAL DESIGN Icons

icon fonts后面還有好多，暫不展示了脚作，等著我放大招

簡約版的對話框
同事用的時候遇到了點小問題葫哗，說這個dialog彈出的時候頁面會有向上的位移，emmm球涛，明兒好好研究一下下~~~

分分鐘animation的趕腳
經(jīng)典款hover懸空出現(xiàn)提示文本
想當初暫用jquery的時候劣针，還要用什么hover，toggle亿扁，trigger....各種點擊事件捺典，現(xiàn)在好咯分分鐘都是設計感。

徹底臣服拜倒在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結(jié)合bootstrap到騰出一個一次顯示7個數(shù)據(jù)的分頁功能就激動得3天睡不著覺从祝，襟己，，牍陌，(傻缺擎浴，啊呸、單純的時光們吖)

下一頁下一頁

//就這么點代碼就實現(xiàn)了分頁毒涧，別攔我退客，我要去撞墻了
<mat-paginator [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

動態(tài)的表格排序

升序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>

大總結(jié)

相信官方文檔的力量链嘀，最科學，最快的'捷徑'
框架都是在不斷更新的档玻，以不變應萬變怀泊，才不會出現(xiàn)‘學不動’ 的狀態(tài)
再好的組件也是基于咱們JavaScript基礎語法，基礎扎實误趴，才能走得遠
至于angular material 的CDK霹琼，后續(xù)研究更新中，嚶嚶嚶。枣申。售葡。