Material(包括Material Icon)在Angular2中的使用详解

1.引入material npm包

rush:bash;"> npm install @angular/material @angular/cdk

2.新建一个ebiz-material.module.ts方便管理引入material的module

rush:bash;"> ng g module ebiz-material -app=ebiz-ui

3.在app的根module中引入ebiz-material.module.ts

rush:js;"> 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

()，那就引入MatCheckboxModule，引入之后再exports。

2.在html文件中使用组件

使用material-icon

1.引入material-icon

如果下载失败（我是install失败了，也不去管它了，能用就行），可以到 github上 下载下来，然后取出iconfont文件夹放到自己的项目目录下，并且在需要用到图标的css(scss)中引入,一般情况我们会放在style.scss中全局去使用。

2.在html的适当位置放上图标

使用material内置theme以及自定义theme

1.material中的组件会根据theme的不同，会有不一样的样式呈现，但是这些样式的不同只局限于material组件内部，不会影响自定义组件的样式。

2.styles.css文件名改为styles.scss，并且在angular-cli.json文件中修改为

3.在style.scss文件中引入material预建主题(总共4个)

4.如果觉得这些主题不适合，可以自定义主题，在styles.scss同级目录下新建一个theme.scss，并写上自定义主题的内容()

rush:bash;"> @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);

5.在步骤3中用到了一些颜色，例如$mat-blue，可以参考这里

6.如果想要对某个组件进行主题特制，可以参考这里

7.在styles.scss中引入自定义主题

@import './theme';

总结

以上所述是小编给大家介绍的Material(包括Material Icon)在Angular2中的使用。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。