Material(包括Material Icon)在Angular2中的使用详解
1.引入materialnpm包
npminstall@angular/material@angular/cdk
2.新建一个ebiz-material.module.ts方便管理引入material的module
nggmoduleebiz-material-app=ebiz-ui
3.在app的根module中引入ebiz-material.module.ts
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
(https://material.angular.io/components/checkbox/overview),那就引入MatCheckboxModule,引入之后再exports。
import{NgModule}from'@angular/core'; import{CommonModule}from'@angular/common'; import{MatCheckboxModule}from'@angular/material'; @NgModule({ imports:[CommonModule,MatCheckboxModule], declarations:[], exports:[MatCheckboxModule] }) exportclassEbizMaterialModule{}
2.在html文件中使用组件
Checkme!
使用material-icon
1.引入material-icon
npminstallmaterial-design-icons
如果下载失败(我是install失败了,也不去管它了,能用就行),可以到github上下载下来,然后取出iconfont文件夹放到自己的项目目录下,并且在需要用到图标的css(scss)中引入,一般情况我们会放在style.scss中全局去使用。
@font-face{ font-family:'MaterialIcons'; font-style:normal; font-weight:400; src:url(assets/iconfont/MaterialIcons-Regular.eot);/*ForIE6-8*/ src:local('MaterialIcons'), local('MaterialIcons-Regular'), url(assets/iconfont/MaterialIcons-Regular.woff2)format('woff2'), url(assets/iconfont/MaterialIcons-Regular.woff)format('woff'), url(assets/iconfont/MaterialIcons-Regular.ttf)format('truetype'); } /*meterialicon的设定*/ .material-icons{ font-family:'MaterialIcons'; font-weight:normal; font-style:normal; font-size:24px;/*Preferrediconsize*/ display:inline-block; line-height:1; text-transform:none; letter-spacing:normal; word-wrap:normal; white-space:nowrap; direction:ltr; /*SupportforallWebKitbrowsers.*/ -webkit-font-smoothing:antialiased; /*SupportforSafariandChrome.*/ text-rendering:optimizeLegibility; /*SupportforFirefox.*/ -moz-osx-font-smoothing:grayscale; /*SupportforIE.*/ font-feature-settings:'liga'; }
2.在html的适当位置放上图标
iconName
使用material内置theme以及自定义theme
1.material中的组件会根据theme的不同,会有不一样的样式呈现,但是这些样式的不同只局限于material组件内部,不会影响自定义组件的样式。
2.styles.css文件名改为styles.scss,并且在angular-cli.json文件中修改为
"styles":[ "styles.scss" ],
3.在style.scss文件中引入material预建主题(总共4个)
@import'~@angular/material/prebuilt-themes/deeppurple-amber.css'; @import'~@angular/material/prebuilt-themes/indigo-pink.css'; @import'~@angular/material/prebuilt-themes/pink-bluegrey.css'; @import'~@angular/material/prebuilt-themes/purple-green.css';
4.如果觉得这些主题不适合,可以自定义主题,在styles.scss同级目录下新建一个theme.scss,并写上自定义主题的内容(https://material.angular.io/guide/theming)
@import'~@angular/material/theming'; @includemat-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); @includeangular-material-theme($my-app-theme);
5.在步骤3中用到了一些颜色,例如$mat-blue,可以参考这里
6.如果想要对某个组件进行主题特制,可以参考这里
7.在styles.scss中引入自定义主题
@import'./theme';
总结
以上所述是小编给大家介绍的Material(包括MaterialIcon)在Angular2中的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!