這篇文章主要介紹了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以參考下
1.引入material npm包
#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檔案中使用元件
<mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>
使用material-icon
1.引入material-icon
npm 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的適當位置放上圖示
<i class="material-icon">iconName<i>
使用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在Angular2的使用(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!