ngx-material相關網址
目前我們使用的是angular5,因此我們選擇ngx-material v5版本。
引入material
-
引入material npm包以及相關的包
npm install @angular/material @angular/cdk 複製程式碼 -
因為一些Angular Material元件依賴Angular animations模組，所以在使用Angular Material時需要安裝@angular/animations模組(新建專案時會有，如果沒有，在第一步中一起安裝@angular/animations)，並且需要匯入BrowserAnimationsModule
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 複製程式碼
3.新建一個module統一管理material的module引入
ng g module ebiz-material
複製程式碼4.在app的根module中引入ebiz-material.module.ts
```typescript
import { EbizMaterialModule } from './ebiz-material/ebiz-material.module';
@NgModule({
imports: [..., EbizMaterialModule],
declarations: [
...
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
複製程式碼使用material元件
-
首先在ebiz-material.module.ts中引入material元件的module，例如我們要用到checkbox，那就引入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 { } 複製程式碼 -
在html檔案中使用元件
<mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>
複製程式碼- 此時會報錯
compiler.js:485 Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'mat-checkbox'. 1. If 'mat-checkbox' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<mat-checkbox [ERROR ->][(ngModel)]="checked"> Check me!</mat-checkbox>"): ng:///AppModule/AppComponent.html@0:14 at syntaxError (compiler.js:485) at TemplateParser.parse (compiler.js:24667) at JitCompiler._parseTemplate (compiler.js:34620) at JitCompiler._compileTemplate (compiler.js:34595) at eval (compiler.js:34496) at Set.forEach (<anonymous>) at JitCompiler._compileComponents (compiler.js:34496) at eval (compiler.js:34366) at Object.then (compiler.js:474) at JitCompiler._compileModuleAndComponents (compiler.js:34365) 複製程式碼import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { MaterialModule } from './material/material.module'; import { RouterModule } from '@angular/router'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MaterialModule, RouterModule.forRoot([ { path: '', component: AppComponent } ]) ], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { } 複製程式碼
使用material內建theme以及自定義theme
-
material中的元件會根據theme的不同，會有不一樣的樣式呈現，但是這些樣式的不同只侷限於material元件內部，不會影響自定義元件的樣式。
-
在style.css檔案中引入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'; 複製程式碼如果報下面這個錯，只要將angular-cli的版本從1.6.4降低到1.6.3就可以解決
ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/deeppurple-amber.css' in 'D:\ebizprise\material-demo\src' 複製程式碼 -
如果覺得這些主題不適合，可以自定義主題，在styles.css同級目錄下新建一個theme.scss，並寫上自定義主題的內容
@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); 複製程式碼在style.css中引入theme.scss自定義主題,
@import './theme'; 複製程式碼此時會報下面這個錯誤
ERROR in ./node_modules/css-loader? {"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module not found: Error: Can't resolve './theme' in 'D:\ebizprise\material-demo\src'
複製程式碼可以將全部的css檔案修改為scss檔案，並且在angular-cli.json檔案中修改為
"styleExt": "scss",
複製程式碼也不能忘記angular-cli.json中引入style.css改為style.scss 5. 在步驟3中用到了一些顏色，例如$mat-blue，可以參考這裡
- 如果想要對某個元件進行主題特製，可以參考這裡
安裝hammerjs(手勢操作才需要)
-
安裝hammerjs
npm install --save hammerjs 複製程式碼 -
在程式的入口(src/main.ts)引入hammerjs
import 'hammerjs'; 複製程式碼
使用material-icon
-
install material-icon
npm install material-design-icons 複製程式碼 -
在style.scss中引入material-icon圖示庫
@import '~material-design-icons/iconfont/material-icons.css'; 複製程式碼 -
在ebiz-material.module.ts中引入MatIconModule
import { MatIconModule } from '@angular/material'; @NgModule({ imports: [ ... MatIconModule ... ], exports: [ ... MatIconModule ... ] }) 複製程式碼 -
在html的適當位置放上圖示
<mat-icon>menu<mat-icon> 複製程式碼
使用其他圖示庫
-
將從網上下載的圖示庫放入到assets資料夾
-
在index.html中引入圖示庫
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>EbizWorkspace</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="assets/icons/style.css" rel="stylesheet"> </head> <body> <app-root></app-root> </body> </html> 複製程式碼 -
在app.component.ts中註冊圖示庫
import { Component, OnInit } from '@angular/core'; import { MatIconRegistry } from '@angular/material'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(private matIconRegistry: MatIconRegistry) { this.matIconRegistry.registerFontClassAlias('icomoon', 'icon'); } ngOnInit() { } } 複製程式碼 -
在html中使用
<mat-icon fontSet="icomoon" fontIcon="icon-treeview" ></mat-icon> 複製程式碼