ionic2 tabs 自定义图标
2024-08-23 10:11:42
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";
}
}
}
}
五、最后来看一下效果
最新文章
- 一个简易的反射类库NMSReflector
- CalloutManager
- MVC基础知识 &ndash; 2.新语法
- php代码效率测试
- imp导入oracle的dmp备份数据
- java基础---->;java中正则表达式二
- CentOS 7安装Splunk
- [BZOJ3670][UOJ#5][NOI2014]动物园
- iOS多线程的初步研究(十)-- dispatch同步
- JDBC之修改数据
- 【VB超简单入门】五、基本输出输入
- vue学习笔记(三)——目录结构介绍
- redis与python交互
- 如何热更新线上的Java服务器代码
- 《Linux就该这么学》第十四天课程
- 小程序如何获取code
- Java -- JDBC 学习--使用 DBUtils
- loadrunner和QTP视频教程汇总
- Intellij IDEA《十分钟,配置struts2》by me
- 基础架构之Docker私有库
热门文章
- FFmpeg在Linux下搭建 ***
- android 怎么实现跑马灯效果
- vs未能正确加载XX包的解决方法
- Attributes.Add用途与用法
- 洛谷 - P1663 - 山 - 半平面交
- Mol Cell Proteomics. |阳梦如|富马酸二甲酯在神经元和星形胶质细胞中新蛋白质靶点的鉴定及相关功能验证
- CZGL.AliIoTClient 文档:说明
- eclipse svn 相关
- Redis - Windows平台下怎么切换db并且清理数据
- 解决:npm中 下载速度慢 和(无法将“nrm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次)。