1.引入material npm包
2.新建一个ebiz-material.module.ts方便管理引入material的module
3.在app的根module中引入ebiz-material.module.ts
使用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,并写上自定义主题的内容()
5.在步骤3中用到了一些颜色,例如$mat-blue,可以参考这里
6.如果想要对某个组件进行主题特制,可以参考这里
@import './theme';
总结
以上所述是小编给大家介绍的Material(包括Material Icon)在Angular2中的使用。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。