开拓新专题，探索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脚手架，
- 自建新项目：
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，但是不建议，目前还不稳定，担心在解压阶段会时不时的崩溃一下下
//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.引入组件模块
* 为了后续支持使用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 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，后续研究更新中，嘤嘤嘤。。。
网友评论