博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular Material的安装和使用
阅读量:4610 次
发布时间:2019-06-09

本文共 1030 字,大约阅读时间需要 3 分钟。

一、安装

  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

      

  5.引入组件模块

      

  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://www.cnblogs.com/crackedlove/p/11576451.html

你可能感兴趣的文章
mysql-5.6.15 开启二进制文件
查看>>
python的沙盒环境--virtualenv
查看>>
软件自动化测试——入门、进阶与实战
查看>>
BZOJ1878 [SDOI2009]HH的项链 树状数组 或 莫队
查看>>
BZOJ3675 [Apio2014]序列分割 动态规划 斜率优化
查看>>
2016.10.24 继续学习
查看>>
产品功能对标 - 服务授权管理
查看>>
各地IT薪资待遇讨论
查看>>
splay入门
查看>>
带CookieContainer进行post
查看>>
C语言学习笔记--字符串
查看>>
CSS-上下文选择器
查看>>
ionic repeat 重复最后一个时要执行某个函数
查看>>
1.初识代码审计-基础
查看>>
[Vue-rx] Stream an API using RxJS into a Vue.js Template
查看>>
解决VC几个编译问题的方法——好用
查看>>
SPOJ #11 Factorial
查看>>
City Upgrades
查看>>
“人少也能办大事”---K2 BPM老客户交流会
查看>>
关于七牛进行图片添加文字水印操作小计
查看>>