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脚手架，
• 2. 自建新项目：

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

• 3. 安装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

• 4. 常用项 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";
// 或者直接标签到index.html里

• 6. 手势支持

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

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

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

import 'hammerjs';

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

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

一共分为六大类

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

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

一、Form Controls | 表单控件

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

  
  
  

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

你想要的日期方式我都有

大大大，老花眼也不怕

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

//html文件

  
    {{tile.text}}
  


//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标签自带这些特征，

  Content 1
  Content 2

• stepper分布器

  
  
  

  垂直版，跟我一步步填写注册信息吧

• 风琴式的展开折叠框

  
  
  

  手风琴啊手风琴

• 令人抓狂的loading加载圈圈

  
  
  

  转啊转

//相信我，就这一个标签搞定

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

  
  
  

  进度条

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

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

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

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

  
  
  

  分分钟animation的赶脚

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

  
  
  

  彻底臣服拜倒在angular material裙下

  
    
      {{ positionOption }}
    
  



  Action

该子组件TooltipPositionExample 的ts文件

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

摊手状

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

  
  
  

  下一页下一页

//就这么点代码就实现了分页，别拦我，我要去撞墙了

• 动态的表格排序

  
  
  

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

  

    
Dessert (100g)
    
Calories
    
Fat (g)
    
Carbs (g)
    
Protein (g)
  

  

    
{{dessert.name}}
    
{{dessert.calories}}
    
{{dessert.fat}}
    
{{dessert.carbs}}
    
{{dessert.protein}}
  

大总结

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