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

      

  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">

二、使用

  該安裝的都已經安裝好了，可以放心大膽地使用了，詳見官網哦。

  參考文檔：angular5+ 之如何用material的UI庫組件構建你的web頁面。