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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
了解javascript中的Dom操作
May 27 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
node.js通过url读取文件
2020/10/16 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
python实现textrank关键词提取
2018/06/22 Python
Python之用户输入的实例
2018/06/22 Python
python制作微博图片爬取工具
2021/01/16 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS