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

前端之家收集整理的这篇文章主要介绍了Material(包括Material Icon)在Angular2中的使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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.如果想要对某个组件进行主题特制,可以参考这里

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

@import './theme';

总结

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

猜你在找的JavaScript相关文章