ionic2 tabs 自定义图标
ionic2 tabs 自定义图标
一、准备资源
- tabs icon 的svg格式的矢量图片
二、生成字体样式文件
打开icoMoon网站去制作字体文件。
三、使用字体文件
解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下。并且将其目录下的styles.css文件命名为wecare.scss(这个名称是你字体的文件名称),再将其拷贝到ionic2项目的src/assest/fonts目录下。下来我们去修改wecare.scss文件。
修改@font-face中的引用地址。
$font-path: '../assets/fonts';
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'wecare';
src: url('#{$font-path}/wecare.eot?l80w4l');
src: url('#{$font-path}/wecare.eot?l80w4l#iefix') format('embedded-opentype'),
url('#{$font-path}/wecare.ttf?l80w4l') format('truetype'),
url('#{$font-path}/wecare.woff?l80w4l') format('woff'),
url('#{$font-path}/wecare.svg?l80w4l#wecare') format('svg');
}
修改字体的公共样式部分的选择器
原代码
[class^="ion-"], [class*=" ion-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'wecare' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
修改后
.wecare {
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'wecare' !important;
line-height: 1;
/* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
} .ion-ios-smart-outline:before,
.ion-ios-smart:before,
.ion-md-smart-outline:before,
.ion-md-smart:before,
.ion-ios-test-outline:before,
.ion-ios-test:before,
.ion-md-test-outline:before,
.ion-md-test:before {
@extend .wecare;
}
注:将一个通用的选择器改为一个类,然后让被应用的类去继承,是因为使用[class^="ion-"], [class*=" ion-"] 来选择时会影响到ionic2自带的图标库,这也是ionic2字体库的写法。
字体的引用
.ion-ios-smart-outline:before {
content: '\e904';
} .ion-ios-smart:before {
content: '\e905';
} .ion-md-smart-outline:before {
content: '\e904';
} .ion-md-smart:before {
content: '\e905';
} .ion-ios-test-outline:before {
content: '\e900';
} .ion-ios-test:before {
content: '\e901';
} .ion-md-test-outline:before {
content: '\e900';
} .ion-md-test:before {
content: '\e901';
}注:在ionic2中引用图标主要靠名称来引用,它会根据Platform自动添加前缀如ios或android(.ion-ios-smart.ion-md-smart),所以我们必须为ios与android各写一个类名,其中像.ion-ios-test-outline这种是tab未被选中时的样式。
将我们的sass文件导入src/theme/variables.scss ,然后就可以在tabs中使用了。
@import '../assets/fonts/wecare';
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Now" tabIcon="test"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Assessment" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Trends" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Smart" tabIcon="smart"></ion-tab>
<ion-tab [root]="tab5Root" tabTitle="Settings" tabIcon="contacts"></ion-tab>
</ion-tabs>
四、解决android中icon只能使用一张icon的问题
在ionic2中android的tab图标选中与未选中只能使用一张svg图片,只是颜色不同。如果我们想要像在ios中一样选中与未选中使用不同的icon,就不能办到。我们的项目的需求就是这样,我不得已只能去看ionic2关于tabs与tab的源码,找到解决问题的方法。我们应该知道在ios中它是通过-outline的后缀来控制显示未选中的icon。起初我看了tabs与tab的源码,没有找到关于这个问题的部分。最后在icon的源码中找到了关于这个问题的部分代码。
if (iconMode === 'ios' && !this._isActive && name.indexOf('logo-') < 0 && name.indexOf('-outline') < 0) {
name += '-outline';
}
它是判断是否是ios与 !this._isActive时给icon的name添加-outline后缀。但是我们也不能去改源码,因为如果以后升级会覆盖。
但是天无绝人之路,在tab的api中提供了一个被选中时调用的方法,我们通过这个方法来改变icon。下面是代码
<ion-tabs>
<ion-tab [root]="tab1Root" (ionSelect)="change(0)" tabTitle="Now" tabIcon="{{test[0]}}"></ion-tab>
<ion-tab [root]="tab2Root" (ionSelect)="change(1)" tabTitle="Assessment" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" (ionSelect)="change(2)" tabTitle="Trends" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab4Root" (ionSelect)="change(3)" tabTitle="Smart" tabIcon="{{test[3]}}"></ion-tab>
<ion-tab [root]="tab5Root" (ionSelect)="change(4)" tabTitle="Settings" tabIcon="contacts"></ion-tab>
</ion-tabs>
test: Array<string> = ["test", "", "", "smart", ""];
change(a: number) {
if (this.platform.is("android")) {
for (let i = 0; i < 5; i++) {
if (i === a) {
this.test[i] = this.test[i].split("-")[0];
} else {
this.test[i] = this.test[i].split("-")[0] + "-outline";
}
}
}
}
五、最后来看一下效果
ionic2 tabs 自定义图标的更多相关文章
- ionic2 tabs使用自定义图标
在ionic2中图标是通过类添加的 比如说 tabIcon="homeImg" 在页面中研究可以看到在ios上有一个类是 .ion-ios-homeImg:before 所以我 ...
- ionic2 +Angular 使用自定义图标
结合阿里巴巴矢量图标库实现在ionic2开发中使用自定义图标. step1:在阿里巴巴图标管理中新建项目,并添加自己选中的图标到购物车: step2:将购物车中的图标"添加至项目" ...
- ionic2中使用自定义图标
在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标). 先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标. 下载完成后解 ...
- ionic3之自定义tabs菜单图标
请参考以下链接 ionic3之自定义tabs菜单图标
- 为bootstrap添加更多自定义图标
From: http://blog.csdn.net/mengxiangfeiyang/article/details/45224731 Twitter Bootstrap 真是前端开发的瑞士军刀,作 ...
- Windows 8.1——将网站固定到开始菜单,自定义图标、颜色和Windows推送通知
记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务栏上,同时自定义图标及任务内容.那个功能在IE 9中被称之为JumpList.http:/ ...
- IconVault – 创建自定义图标字体的神器推荐
图标字体简单来说就是外观呈现为图标的字体,同时具有矢量图形的特征,在不同的设备上使用图标的时候就不用加载不同尺寸的图片文件,能够减少 HTTP 请求数,提高页面加载速度. IconVault 这款在线 ...
- Sencha Touch 2.2.1 Custom Icon 自定义图标
ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...
- Delphi 7使用自定义图标关联文件类型
Delphi 7使用自定义图标关联文件类型 5.2 Delphi编程(40) 版权声明:本文为博主原创文章,未经博主允许不得转载. 在开发过程中,我们经常需要属于自己的文件类型,自定义的后缀名不仅可 ...
随机推荐
- Quicklz压缩算法
以前对压缩算法一无所知,只是知道哈弗曼编码能做这种事情,但是感觉这样的方法奇慢无比.昨天下午看了下号称世界上最快的压缩算法Quicklz,对压缩的基本思路有了一定的了解.一般的压缩程序的要求读入文件之 ...
- ETL 循环导入 平面文件
http://blog.csdn.net/zlp321002/article/details/3413365 ETL设计之-Foreach 循环容器 应用场景: 批量导入某一文件夹下的所有文件.就可以 ...
- 最新sublimetext3080注册
----- BEGIN LICENSE -----K-20Single User LicenseEA7E-9401293A099EC1 C0B5C7C5 33EBF0CF BE82FE3BEAC216 ...
- c/c++面试39-44之内存动态分配
39 指针的初始化(二叉树排序),其中引入了双向链表 #include <stdio.h> #include <stdlib.h> struct Tag_Node { stru ...
- Flutter实战视频-移动电商-41.详细页_数据接口的调试
41.详细页_数据接口的调试 建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试 生成model类 json数据: { ", "message": "s ...
- eclipse修改某一个项目的字符编码
eclipse修改某一个项目的字符编码 1 选中要修改编码的文件,鼠标右键,选择[Properties] 2 左侧选中[Resource], 右侧出现[Text file encoding], ...
- Jmeter + Junit
在使用jmeter中Junit的功能之前,最好将接口以手动的方式调通,可以参考 Jmeter之HTTP Request 下面开始讲一下如何使用Junit功能 1. 编写测试类 JmeterJunit ...
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例: //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...
- IntelliJ IDEA的自动提示貌似是区分大小写的,首字母小写的话,怎么都提示不出来。
IntelliJ IDEA的自动提示貌似是区分大小写的,首字母小写的话,怎么都提示不出来. File>Settings>editor >general >code comple ...
- VS2010在WIN7下安装报错“下列组件安装失败”如何解决
VS2010在WIN7下安装报错“下列组件安装失败”如何解决 http://www.111cn.net/net/42/75914.htm