环境:
Angular 4.0.0
Angular2 Material2 2.0.0-beta.3
node v7.4.0
npm 4.0.5
具体使用方法,查看官方教程:
https://material.angular.io
由于官方教程也是写得相当迷,不怎么清晰的,所以就结合了这几个教程一起看了:
https://github.com/angular/material2、https://www.npmjs.com/~angular2-material
它们的内容基本都相同的,但是排版上会比官方的好看多了... 主要还是要多看一下github的example,这样会容易懂一点。
1.设置开发环境
首先需要安装Node.js和npm。Mac的童鞋推荐使用安装nvm对node和nvm进行版本管理。
然后全局安装Angular-CLI
npm install -g @angular/cli
2.创建一个新的项目
ng new my-app
3.安装 Angular Material components
进入项目目录,然后安装Angular Material 组件
cd my-app
npm install --save @angular/material
4.安装Animation,并在app.module.ts导入
因为一些Angular Material组件是依赖于Angular animations模块的。而Angular4.0开始就将Animation独立出来使用,需要使用的时候需要另外安装。
npm install --save @angular/animations
// imports
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
5.在app.module.ts 导入 Angular Material 模块
1)统一将 Angular Material 所有模块引入
import{ MaterialModule } from'@angular/material';
// other imports
@NgModule({
...
imports: [MaterialModule],
...
})
export class AppModule { }
2) 引入你需要使用的模块
方法一
import {MdButtonModule, MdCheckboxModule} from '@angular/material';
@NgModule({
...
imports: [MdButtonModule, MdCheckboxModule],
...
})
方法二:创建单独的NgModule模块引入需要使用的模块,方便你在任意地方使用组件
import {MdButtonModule, MdCheckboxModule} from '@angular/material';
@NgModule({
imports: [MdButtonModule, MdCheckboxModule],
exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }
6.在所需模块中引入你所需要的模块,编写组件
比如Dialog。
import{MdDialog} from'@angular/material';
@Component({
...
})
export class DialogExample {
constructor(publicdialog: MdDialog) { }
openDialog() {
this.dialog.open(DialogOverviewExampleDialog);
}
}
具体的使用方法,麻烦查看文档吧~
7.设置主题
1)使用自带的主题
Angular Material自带了几款主题,具体位置在:
/Users/leechingyin/Sites/NgMaterial2Custom/ng-material-app/node_modules/@angular/material/core/theming/prebuilt
在style.css中,引入相应的主题,就可以使用该主题
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
2)使用自定义主题
在scss文件中,引入主题文件,并对样式进行设置
@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-cyan, 500);
$accent: mat-palette($mat-cyan, 400);
$warn: mat-palette($mat-cyan, 600);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
如果你是使用Angular-CLI创建项目的话,则在项目中添加相应的scss文件,并在 "styles" list in angular-cli.json 添加入口文件,这样就能使用到你自定义的主题文件了!
8.给你们设置主题教程的链接,并附带几个颜色工具,比较有用的
https://medium.com/covalent-ui/angular-material-2-theme-tutorial-2f7e6c344006
- Material Palette(web)— a simple web tool to quickly test a primary & accent color on an interface
- Material Colors(macOS) - macOS desktop app (React Nativeversion)
- Materialette(macOS/Windows/Linux) — toolbar app with hex/rgb
- MaterialUI(web) — hex/rgb/rgba web palette selection
- MaterialUIColors(web) — another web hex/rgb/rgba selection