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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
Jquery使用val方法读写value值
May 18 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
js实现简单选项卡制作
Aug 05 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
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
物理教师自荐信范文
2013/12/28 职场文书
社区春季防火方案
2014/06/02 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
成事在人观后感
2015/06/16 职场文书
总经理聘用协议书
2015/09/21 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python