ionic2 tabs 图标自定义实例


Posted in Javascript onMarch 08, 2017

一、准备资源

tabs icon 的svg格式的矢量图片

ionic2 tabs 图标自定义实例

二、生成字体样式文件

打开icoMoon网站去制作字体文件。

ionic2 tabs 图标自定义实例

ionic2 tabs 图标自定义实例

ionic2 tabs 图标自定义实例

三、使用字体文件

解压下载的文件,将其中的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 图标自定义实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 #Javascript
jQuery实现图片滑动效果
Mar 08 #Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 #Javascript
JS实现根据密码长度显示安全条功能
Mar 08 #Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 #Javascript
bootstrap实现动态进度条效果
Mar 08 #Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 #Javascript
You might like
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
实时获取Python的print输出流方法
2019/01/07 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python的缺点和劣势分析
2019/11/19 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Python os库常用操作代码汇总
2020/11/03 Python
numba提升python运行速度的实例方法
2021/01/25 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
大二自我鉴定范文
2013/10/05 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
关于迟到的检讨书
2015/05/06 职场文书
基石观后感
2015/06/12 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers