Angular Material 之 Get Started

時間 2019-11-15

標籤 angular material started 欄目 AngularJS 简体版

原文原文鏈接

1、安裝 Angular Material

在 Angualr 項目根目錄下執行以下命令：javascript

npm install --save @angular/material複製代碼

安裝完成後有以下提示：
css

2、安裝 Aniamtions

由於一些 Angular Material 組件依賴 Angular animations 模塊，因此在使用 Angular Material 時須要安裝 @angular/animations 模塊，不然在使用 Material 時會報以下錯誤：html

Cannot find module '@angular/animations'.複製代碼

在 Angualr 項目根目錄下執行以下命令：java

npm install --save @angular/animations複製代碼

安裝完成後有以下提示：
node

3、導入 Animations 相關 Module

安裝完 @angular/animations 後，須要在根模塊中導入相關 Modulegit

1. 導入 BrowserAnimationsModule

若是須要顯示相關動畫效果，如在真實的應用中，須要在根模塊中導入 BrowserAnimationsModulegithub

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  ...
  imports: [
    ...
    BrowserAnimationsModule
  ],
  ...
})
export class AppModule { }複製代碼

2. 導入 NoopAnimationsModule

若是不想添加其餘依賴到項目中，如在動畫很慢的平臺或用於測試時，可使用 NoopAnimationsModule ，它只是模仿 animations 模塊，實際上並無動畫效果。npm

import { NoopAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  ...
  imports: [
    ...
    NoopAnimationsModule
  ],
  ...
})
export class AppModule { }複製代碼

4、導入 Material Component Module

1. 在根模塊中爲要使用的每一個組件導入 Module

如導入 MdToolbarModule 和 MdIconModuleapi

import {MdToolbarModule, MdIconModule} from '@angular/material';

@NgModule({
  ...
  imports: [
      ...
      MdToolbarModule,
      MdIconModule
  ],
  ...
})
export class AppModule { }複製代碼

2. 建立一個單獨的 Module ，導入在項目中用到的全部 Angular Material 組件；而後能夠將該 Module 導入到要使用 Angular Material 組件的模塊

import {MdToolbarModule, MdIconModule} from '@angular/material';

@NgModule({
  imports: [MdToolbarModule, MdIconModule],
  exports: [MdToolbarModule, MdIconModule],
})
export class CustomMaterialModule { }複製代碼

在根模塊中導入 CustomMaterialModuleide

import {CustomMaterialModule} from './custom.material.module';

@NgModule({
  ...
  imports: [
      ...
      CustomMaterialModule
  ],
  ...
})
export class AppModule { }複製代碼

3. 導入全部的 Angular Material 組件（不建議）

若是不想一一導入 Material 的單個組件，能夠直接在跟模塊中導入全部 Material 組件

在根模塊中導入 MaterialModule

import { MaterialModule } from "@angular/material";

@NgModule({
  ...
  imports: [
    ...
    MaterialModule.forRoot()
  ],
  ...
})
export class AppModule { }複製代碼

5、引入主題

使用 Material 預置的主題須要在項目中引入主題樣式

可用的預置主題有：

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
pink-bluegrey.css

引入預置主題有兩種方式：

1. 在 styles.css 中引入

在頂部添加

@import '~@angular/material/prebuilt-themes/indigo-pink.css';複製代碼

2. 在 index.html 中引入

在 head 標籤下添加

<head>
  ...
  <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
</head>複製代碼

更多主題用法請查看 Angular Material Theming Guide

6、手勢支持

一些 Material 組件依賴 HammerJS 手勢庫，如：md-slide-toggle, md-slider, mdTooltip 等，要使用這些組件的所有功能須要在項目中添加 HammerJS 。

1. 安裝 HammerJS

在 Angualr 項目根目錄下執行以下命令：

npm install --save hammerjs複製代碼

安裝完成後有以下提示：

2. 導入到項目的根模塊

安裝完成後，須要將 hammerjs 導入到項目的根模塊

...
import 'hammerjs';
...複製代碼

7、添加 Material Icons

在使用 md-icon 組件時，若是要和官方的 Material Design Icons 一塊兒使用，須要在 index.html 中引入：

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

在使用 md-icon 組件時可使用官方的 Material Design Icons，如：

<md-icon>settings</md-icon>複製代碼

多個單詞之間用下劃線連接

<md-icon>zoom_in</md-icon>複製代碼

更多 Material Design Icons 用法請查看 Material Icons Guide

相關標籤/搜索

retrotfit2.1+material

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。