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

2023-09-16 11:24:05 67

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中的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

上一篇
iOS开发中Swift逃逸闭包知识下一篇
python编程嵌套函数实例代码

热门推荐

1 毛坯房验收经验和常识看了之后再验房心里有底

2 二手房收房如何交接二手房收房注意问题

3 专业验收毛坯房的价格商品房验收合格的标准

4 精装房怎么验收精装房请验房师有用吗

5 一般要到哪里找验房师验房师有哪些作用呢

6 请人验房一般是多少钱验房师费用是多少

7 怎样测量房子面积建筑面积和使用面积怎么算

8 收房需要注意什么仔细检查不松懈

9 收房时三书一证一表是什么主要作用介绍

10 交房时交房税费有哪些本文为你一一讲解

11 验房都需要验什么要做哪些准备呢

12 毛坯房验房师有必要请吗毛坯房装修完如何验收

13 地下室防水工程质量验收规范详解

14 水性涂料、油性涂料区别介绍

15 零基础布艺DIY工坊教你做超萌猫头鹰钥匙包

16 三棵树漆怎么样？三棵树漆官方网站

17 家庭“装修套餐”中猫腻你知道吗？

18 小空间大浴望卫浴间装修巧支招

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

热门推荐

随机推荐