meterial 使用總結

 

 

1.安裝 npm install --save @angular/material @angular/cdk @angular/animations

官方文檔的安裝

 

D:\cmf\angular6\project1>npm install --save @angular/material @angular/cdk @angular/animations
npm WARN @angular/animations@6.1.6 requires a peer of @angular/core@6.1.6 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/material@6.4.6
+ @angular/animations@6.1.6
+ @angular/cdk@6.4.6
added 3 packages and updated 1 package in 33.718s

 

 

D:\cmf\angular6\project1>npm install -g @angular/material @angular/cdk @angular/animations
npm WARN @angular/animations@6.1.6 requires a peer of @angular/core@6.1.6 but none is installed. You must
install peer dependencies yourself.
npm WARN @angular/cdk@6.4.6 requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed.
You must install peer dependencies yourself.
npm WARN @angular/cdk@6.4.6 requires a peer of @angular/common@>=6.0.0-beta.0 <7.0.0 but none is installed
. You must install peer dependencies yourself.
npm WARN @angular/material@6.4.6 requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is instal
led. You must install peer dependencies yourself.
npm WARN @angular/material@6.4.6 requires a peer of @angular/common@>=6.0.0-beta.0 <7.0.0 but none is inst
alled. You must install peer dependencies yourself.

+ @angular/animations@6.1.6
+ @angular/cdk@6.4.6
+ @angular/material@6.4.6
added 7 packages in 52.991s

 

2.ng add @angular/material

 

 

3.配置 BrowserAnimationsModule

在app.module.ts裏確認

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

　　imports: [

　　　　　　......

　　　　　　BrowserAnimationsModule

]

})

 

4.導入 MatButtonModule  MatCheckboxModule

app.module.ts裏

import { MatButtonModule , MatCheckboxModule} from '@angular/material';

@NgModule({

　　　　imports: [

　　　　　　　　......

　　　　　　　　MatButtonModule,
　　　　　　　　MatCheckboxModule

　　　　　　　　]

}）

 

5.導入主題樣式

project1\src\app\app.component.sass 裏導入

@import "~@angular/material/prebuilt-themes/indigo-pink.css"

 

6.導入hammer.js

D:\cmf\angular6\project1>npm install --save hammerjs
npm WARN @angular/animations@6.1.6 requires a peer of @angular/core@6.1.6 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32"
,"arch":"x64"})

+ hammerjs@2.0.8
added 1 package in 25.055s