必须依赖 :

  • angualr2+
  • angular/material2 +
  • angular/cdk
  • angular/core
  • angualr/animations

开始使用 :

1 .在app.module.ts中 :

# 导入动画库
import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; 
# 声明需要的组件
import {MatToolbarModule} from "@angular/material";
1
2
3
4
5
6
7
8
9
10
11

#### 2 .在`/style.scss`导入全局样式

<!--more-->

<pre class="pure-highlightjs">`@import "~@angular/material/prebuilt-themes/indigo-pink.css";
html, body, app-root ,mat-sidenav-container{
width: 100%;
height: 100%;
margin: 0;
}
@import的是materialUI自带主题其中之一 ,位置在`/node_modules/@angular/material/prebuilt-themes/`  ,

 也可以也可以参照[官网文档](https://material.angular.io/) (众所周知的原因导致首次打开异常慢 )自定义主题 ,不导入会有部分样式不可用

其他样式是为了清除浏览器默认样式 ,可以没有但建议写

#### 3  .在AppModel的装饰器中导入需要的组件  : (如果你不是声明在app.module.ts中 ,则组件需要导出) 

<pre class="pure-highlightjs">`@NgModule( {
   imports : [
         .....
         MatToolbarModule
   ],
 exports : [MatToolbarModule], 
})

    #### 4. 在模板中使用 :

    <pre class="pure-highlightjs">`<mat-toolbar-container>
         <mat-toolbar color="primary">
         </mat-toolbar>
    </mat-toolbar-container>

解释一些具体的含义 : 

`<mat-toolbar-container>` 是根标记 ,声明代码里含有material 组件 ,

 `<mat-toolbar color="primary">` 声明这是一个`toolbar`组件 ,

关于`color`:

 是指的`toolbar`的呈现形式 (其实就是颜色),共有3种:

1.  `primary` 传统的基佬紫 ,[如图 ](https://alextech-1252251443.cos.ap-guangzhou.myqcloud.com/2017/11/2017-11-09-11-36-59-的屏幕截图.png)
2.  `warn`  警告 ,大概是红色的 ,[如图](https://alextech-1252251443.cos.ap-guangzhou.myqcloud.com/2017/11/2017-11-09-11-39-45-的屏幕截图.png)
3.  `accent`  强调 .大概是少女红 ,[如图](https://alextech-1252251443.cos.ap-guangzhou.myqcloud.com/2017/11/2017-11-09-11-42-16-的屏幕截图-1.png)

## 一些特殊用法 : 

官网文档 : [https://material.angular.io/components/toolbar/overview](https://material.angular.io/components/toolbar/overview)

未完待续 -----