菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
32
0

angular material怎么安装?

原创
05/13 14:22
阅读数 1470

怎么安装angular material?

1、前期准备:npm(安装node即可),angular cli脚手架

2、自建项目

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

3、安装angular material和angular cdk

//npm方法
npm install --save @angular/material @angular/cdk

//yarn方法
yarn add @angular/material @angular/cdk

4、常用项animations(非必备)

//npm方法
npm install --save @angular/animations

//yarn方法
yarn add @angular/animations

1.png

5、引入组件模块

2.png

6、引入主题

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

7、手势支持

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

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

然后在入口文件(main.js)中引入

import 'hammerjs';

8、添加material的icon(可选)

如果想要你的mat-icon标签获取官方的Material Design Icons,在index.html文件中加入下面的link。

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

该安装的都已经安装好了,可以放心大胆地使用了,详见官网(https://material.angular.io/)哦。

发表评论

0/200
32 点赞
0 评论
收藏
为你推荐 换一批