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


Posted in Javascript onFebruary 11, 2018

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

总结

以上所述是小编给大家介绍的Material(包括Material Icon)在Angular2中的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
js 获取扫码枪输入数据的方法
Jun 10 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 #Javascript
Vue实现点击后文字变色切换方法
Feb 11 #Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 #Javascript
vue刷新和tab切换实例
Feb 11 #Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 #Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 #Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 #Javascript
You might like
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
摩卡咖啡
2021/03/03 咖啡文化
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
Python制作刷网页流量工具
2017/04/23 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
经济管理毕业生求职信
2014/03/15 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
记者节感言
2015/08/03 职场文书
学习委员竞选稿
2015/11/20 职场文书