欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-28 20:18:26
1.引入material npm包 npm install @angular/material @angular/cdk 2.新建一个ebiz-materi...

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_schema]
})

使用material组件

1.首先在ebiz-material.module.ts中引入material组件的module,例如我们要用到checkbox

(),那就引入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文件中使用组件

<mat-checkbox [(ngmodel)]="checked">check me!</mat-checkbox>

使用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.ttf) 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的适当位置放上图标

<i class="material-icon">iconname<i>

使用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,并写上自定义主题的内容()

@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中的使用,希望对大家有所帮助