開拓新專題，探索angular6, Rxjs6, material UI, Ionic, GraphQL,WebGL,PWA... 啥最新咱講啥，緊跟時代的屁股。
material
angular material簡介
安裝 項目搭建 相關包import
components組件過一遍
實例GIF圖展示
為CDK做下期分解鋪墊
本以為Ionic可以走遍天下，果然too young too naive
木事木事。不都是UI庫嘛，擼起袖子npm 走起來，轉戰(zhàn)web端UI庫，不信干不過，
node的2.0版本 deno都出來了，誰都別拉我，我還能繼續(xù)學，誰拉我跟誰急
人家deno作者辣么謙虛：deno取自Design mistakes node
我。。。大神果然是用來膜拜的，恩...
學不動系列
我某某同事隨口那么一提：還是ant-design 好用
我.... (的內心：這又是啥???）
ant-design， 移動端設計規(guī)范，主要作為產品、設計師、工程師學習產品交互設計的一種工具，用起來和前端的UI框架庫類似
- 中文鏈接： ant-design
- 國際范英文版 ant-design
OK，改天有空再扯遠點，畢竟今天的主題是material
angular material官網
- 注意：谷歌Material Design在如今的前端頁面設計中非常流行。Material Design的設計風格向我們展示了一個簡單而有內涵的現(xiàn)代UI設計方案。該框架有很多優(yōu)秀的子框架：Materialize， Angular Material，Material UI，MUI CSS框架，Polymer，其中angular material才是我們今天要講的主題
步驟：
- 1.前期準備：npm, angular cli腳手架，
- 自建新項目：
ng new my-app //angular項目名字
ng g c test //組件名test
- 安裝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
- 常用項 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">
- 手勢支持
有的標簽(eg:mat-slide-toggle, mat-slider, mattooltip 等)需要hammerJS來支持，為了獲取這些組件的所有特性，通過npm,CDN來引入到項目中
- 手勢支持
//npm
npm install --save hammerjs
//yarn
yarn add hammerjs
上面下載好后，在你的入口文件中引入(eg:main.ts)
import 'hammerjs';
- (可選)添加material 的icon
如果你想要你的mat-icon標簽獲取到官方的Material Design Icons，在index.html文件中加入下面的link
- (可選)添加material 的icon
<link rel="stylesheet">
OK，至此為止，該引入的都已經引入好了，現(xiàn)在我們簡單講一下material的組件components
一共分為六大類
| Components | 組件 |
|---|---|
| Form Controls | 表單控件 |
| Navigation | 導航 |
| Layout | 布局 |
| Buttons & Indicators | 按鈕 & 指示器 |
| Popups & Moduals | 彈框 & 提示框 |
| Data table | 數據表格 |
我們來點實際的，挑幾個胸大屁股翹得漂亮GIF動態(tài)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柵格系統(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欄切換
* 就喜歡你看不慣我天生麗質又干不掉我的樣子
天生自帶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懸空出現(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結合bootstrap到騰出一個一次顯示7個數據的分頁功能就激動得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>
大總結
- 相信官方文檔的力量，最科學，最快的'捷徑'
- 框架都是在不斷更新的，以不變應萬變，才不會出現(xiàn)‘學不動’ 的狀態(tài)
- 再好的組件也是基于咱們JavaScript基礎語法，基礎扎實，才能走得遠
- 至于angular material 的CDK，后續(xù)研究更新中，嚶嚶嚶。。。
