首頁  >  文章  >  web前端  >  有關Material在Angular2的使用(詳細教學)

有關Material在Angular2的使用(詳細教學)

亚连
亚连原創
2018-06-06 10:19:111815瀏覽

這篇文章主要介紹了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: &#39;Material Icons&#39;;
 font-style: normal;
 font-weight: 400;
 src: url(assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
 src: local(&#39;Material Icons&#39;),
    local(&#39;MaterialIcons-Regular&#39;),
    url(assets/iconfont/MaterialIcons-Regular.woff2) format(&#39;woff2&#39;),
    url(assets/iconfont/MaterialIcons-Regular.woff) format(&#39;woff&#39;),
    url(assets/iconfont/MaterialIcons-Regular.ttf) format(&#39;truetype&#39;);
}
/* meterial icon的设定 */
.material-icons {
 font-family: &#39;Material Icons&#39;;
 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: &#39;liga&#39;;
}

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

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

使用material內建theme以及自訂theme

1.material中的元件會根據theme的不同,會有不一樣的樣式呈現,但是這些樣式的不同只限於material元件內部,不會影響自訂元件的樣式。

2.styles.css檔案名稱改為s​​tyles.scss,並且在angular-cli.json檔案中修改為

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

3.在style.scss檔案中引入material預建主題(總共4個)

@import &#39;~@angular/material/prebuilt-themes/deeppurple-amber.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/indigo-pink.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/pink-bluegrey.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/purple-green.css&#39;;

4.如果覺得這些主題不適合,可以自訂主題,在styles.scss同級目錄下新建一個theme.scss,並寫上自訂主題的內容(https ://material.angular.io/guide/theming)

@import &#39;~@angular/material/theming&#39;;
@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';

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在微信小程式中如何實作圓形進度條

在webpack中實作動態引入檔案

在JavaScript中有關的trick

#

以上是有關Material在Angular2的使用(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn