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

网友投稿 422 2023-02-17


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

1.引入material npm包

npm install @angular/material @angular/cdk

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

ng g module ebiz-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_SCHEMwlTqIBPYA]

})

使用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 ]

})

export class EbizMaterialModule { }

2.在html文件中使用组件

Check me!

使用material-icon

1.引入material-icon

npm install material-design-icons

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

@font-face {

font-family: 'Material Icons';

font-style: normal;

font-weight: 400;

src: url(assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */

src: local('Material Icons'),

local('MaterialIcons-Regular'),

url(assets/iconfont/MaterialIcons-Regular.woff2) format('woff2'),

url(assets/iconfont/MaterialIcons-Regular.woff) format('woff'),

url(assets/iconfont/MaterialIcons-Regular.ttfwlTqIBPY) format('truetype');

}

/* meterial icon的设定 */

.material-icons {

font-family: 'Material Icons';

font-weight: normal;

font-style: normal;

font-size: 24px; /* Preferred icon size */

display: inline-block;

line-height: 1;

text-transform: none;

letter-spacing: normal;

word-wrap: normal;

white-space: nowrap;

direction: ltr;

/* Support for all WebKit browsers. */

-webkit-font-smoothing: antialiased;

/* Support for Safari and Chrome. */

text-rendering: optimizeLegibility;

/* Support for Firefox. */

-moz-osx-font-smoothing: grayscale;

/* Support for IE. */

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';

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:api接口管理系统文档(api接口管理系统文档在哪)
下一篇:接口测试插件(接插件测试标准)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~