Material(包括Material Icon)在Angular2中的使用详解
栏目: 编程语言 · JavaScript · 发布时间: 8年前
内容简介：这篇文章主要介绍了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_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 ]
})
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，并写上自定义主题的内容(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';
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Release It!
Michael T. Nygard / Pragmatic Bookshelf / 2007-03-30 / USD 34.95
“Feature complete” is not the same as “production ready.” Whether it’s in Java, .NET, or Ruby on Rails, getting your application ready to ship is only half the battle. Did you design your system to......一起来看看 《Release It!》 这本书的介绍吧!
