這篇文章主要介紹了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以參考下

1.引入material npm包npm install @angular/material @angular/cdk

2.新建一個ebiz-material.module.ts方便管理引入material的moduleng g module ebiz-material -app=ebiz-ui

3.在app的根module中引入ebiz-material.module.tsimport { EbizMaterialModule } from './ebiz-material/ebiz-material.module';

@NgModule({

imports: [..., EbizMaterialModule],

declarations: [

...

],

schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

使用material組件

1.首先在ebiz-material.module.ts中引入material組件的module，例如我們要用到checkbox

(https://material.angular.io/components/checkbox/overview)，那就引入MatCheckboxModule，引入之后再exports。import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { MatCheckboxModule } from '@angular/material';

@NgModule({

imports: [CommonModule, MatCheckboxModule],

declarations: [],

exports: [ MatCheckboxModule ]

})

export class EbizMaterialModule { }

2.在html文件中使用組件Check me!

使用material-icon

1.引入material-iconnpm install material-design-icons

如果下載失敗(我是install失敗了，也不去管它了，能用就行)，可以到 github上 下載下來，然后取出iconfont文件夾放到自己的項目目錄下，并且在需要用到圖標的css(scss)中引入,一般情況我們會放在style.scss中全局去使用。@font-face {

font-family: 'Material Icons';

font-style: normal;

font-weight: 400;

src: url(assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */

src: local('Material Icons'),

local('MaterialIcons-Regular'),

url(assets/iconfont/MaterialIcons-Regular.woff2) format('woff2'),

url(assets/iconfont/MaterialIcons-Regular.woff) format('woff'),

url(assets/iconfont/MaterialIcons-Regular.ttf) format('truetype');

}

/* meterial icon的設定 */

.material-icons {

font-family: 'Material Icons';

font-weight: normal;

font-style: normal;

font-size: 24px; /* Preferred icon size */

display: inline-block;

line-height: 1;

text-transform: none;

letter-spacing: normal;

word-wrap: normal;

white-space: nowrap;

direction: ltr;

/* Support for all WebKit browsers. */

-webkit-font-smoothing: antialiased;

/* Support for Safari and Chrome. */

text-rendering: optimizeLegibility;

/* Support for Firefox. */

-moz-osx-font-smoothing: grayscale;

/* Support for IE. */

font-feature-settings: 'liga';

}

2.在html的適當位置放上圖標iconName

使用material內置theme以及自定義theme

1.material中的組件會根據theme的不同，會有不一樣的樣式呈現，但是這些樣式的不同只局限于material組件內部，不會影響自定義組件的樣式。

2.styles.css文件名改為styles.scss，并且在angular-cli.json文件中修改為"styles": [

"styles.scss"

],

3.在style.scss文件中引入material預建主題(總共4個)@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

4.如果覺得這些主題不適合，可以自定義主題，在styles.scss同級目錄下新建一個theme.scss，并寫上自定義主題的內容(https://material.angular.io/guide/theming)@import '~@angular/material/theming';

@include mat-core();

$my-app-primary: mat-palette($mat-blue);

$my-app-accent: mat-palette($mat-teal, A200, A100, A400);

$my-app-warn: mat-palette($mat-red);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

5.在步驟3中用到了一些顏色，例如$mat-blue，可以參考這里

6.如果想要對某個組件進行主題特制，可以參考這里

7.在styles.scss中引入自定義主題

@import './theme';

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

總結

以上是生活随笔為你收集整理的angular2 php 教程,有关Material在Angular2中的使用（详细教程）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。