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 相关文章推荐
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
关于JS中prototype的理解
Sep 07 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 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简单封装了一些常用JS操作
2007/02/25 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
JS与框架页的操作代码
2010/01/17 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
浅析Python requests 模块
2020/10/09 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
中专毕业生自荐信
2013/11/16 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
个人汇报材料范文
2014/12/30 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书