重慶分公司
重慶分公司，新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
Material(包括MaterialIcon)在Angular2中的使用詳解
1.引入material npm包
成都創新互聯公司長期為上千客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為路南企業提供專業的成都網站設計、成都網站制作，路南網站改版等技術服務。擁有十余年豐富建站經驗和眾多成功案例,為您定制開發。
npm install @angular/material @angular/cdk
2.新建一個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文件中使用組件
Check me!
使用material-icon
1.引入material-icon
npm install material-design-icons
如果下載失?。ㄎ沂莍nstall失敗了，也不去管它了，能用就行），可以到 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';
總結
以上所述是小編給大家介紹的Material(包括Material Icon)在Angular2中的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！
名稱欄目：Material(包括MaterialIcon)在Angular2中的使用詳解
文章網址：http://www.xueling.net.cn/article/pdsjhi.html