有關(guān)Material在Angular2中的使用（詳細(xì)教程）

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:40:38

有關(guān)Material在Angular2中的使用（詳細(xì)教程）

有關(guān)Material在Angular2中的使用（詳細(xì)教程）:這篇文章主要介紹了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以參考下1.引入material npm包npm install @angular/material @angular/cdk2.新建一個(gè)ebiz-material.module.ts方便管理引入material的modu

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀有關(guān)Material在Angular2中的使用（詳細(xì)教程）:這篇文章主要介紹了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以參考下1.引入material npm包npm install @angular/material @angular/cdk2.新建一個(gè)ebiz-material.module.ts方便管理引入material的modu

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

1.引入material npm包

npm install @angular/material @angular/cdk

2.新建一個(gè)ebiz-material.module.ts方便管理引入material的module

ng g module ebiz-material -app=ebiz-ui

3.在app的根module中引入ebiz-material.module.ts

import { 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文件中使用組件

<mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>

使用material-icon

1.引入material-icon

npm install material-design-icons

如果下載失敗（我是install失敗了，也不去管它了，能用就行），可以到 github上下載下來(lái)，然后取出iconfont文件夾放到自己的項(xiàng)目目錄下，并且在需要用到圖標(biāo)的css(scss)中引入,一般情況我們會(huì)放在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的設(shè)定 */
.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的適當(dāng)位置放上圖標(biāo)

<i class="material-icon">iconName<i>

使用material內(nèi)置theme以及自定義theme

1.material中的組件會(huì)根據(jù)theme的不同，會(huì)有不一樣的樣式呈現(xiàn)，但是這些樣式的不同只局限于material組件內(nèi)部，不會(huì)影響自定義組件的樣式。

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

"styles": [
 "styles.scss"
 ],

3.在style.scss文件中引入material預(yù)建主題(總共4個(gè))

@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.如果覺(jué)得這些主題不適合，可以自定義主題，在styles.scss同級(jí)目錄下新建一個(gè)theme.scss，并寫(xiě)上自定義主題的內(nèi)容(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.如果想要對(duì)某個(gè)組件進(jìn)行主題特制，可以參考這里

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

@import './theme';

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

相關(guān)文章：

在微信小程序中如何實(shí)現(xiàn)圓形進(jìn)度條

在webpack中實(shí)現(xiàn)動(dòng)態(tài)引入文件

在JavaScript中有關(guān)的trick

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com