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 图标自定义实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • ionic2 tabs 图标自定义实例

    一.准备资源 tabs icon 的svg格式的矢量图片 二.生成字体样式文件 打开icoMoon网站去制作字体文件. 三.使用字体文件 解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下.并且将其目录下的styles.css文件命名为wecare.scss(这个名称是你字体的文件名称),再将其拷贝到ionic2项目的src/assest/fonts目录下.下来我们去修改wecare.scss文件. 修改@font-face中的引用地址. $font-pa

  • Android实现一个包含表格的图标库实例代码

    之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示 1.效果图 2.各种图表的使用方式 1.饼状图 这个和原先的使用一样,只不过增加了一个动画,可以参看之前的文章,饼状图使用. 2.水平多柱状图 2.1 xml布局 <wellijohn.org.varchart.hor_

  • Python django搭建layui提交表单,表格,图标的实例

    利用layui制作与众不同的感谢表单,表格 layui极大的提高了前端开发效率,它极具个性的样式等等都非常吸引人,接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格 注:忽略创建项目,配置文件,若这部分内容不太明白,参考教你使用Django搭建一个基金模拟交易系统,里面会教你从项目创建到最终运行的完整流程. 第一步:在templates目录下新建一个index.html文件(文件内容根据自己的业务需求在layui官网复制即可),同时改变其布局只需将

  • jQuery EasyUI Layout实现tabs标签的实例

    jQuery EasyUI Layout实现tabs标签的实例 一.概述: 1.引入jquery.js与easyUi相关文件 2.效果如图: 二.创建Layout主页: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!D

  • Android xmlns 的作用及其自定义实例详解

     Android xmlns 的作用及其自定义实例详解 xmlns:Android="http://schemas.android.com/apk/res/android的作用是: 这个是xml的命名空间,有了他,你就可以alt+/作为提示,提示你输入什么,不该输入什么,什么是对的,什么是错的,也可以理解为语法文件.或者语法判断器什么的 这个主要作用是在运行的时候那些控件的属性都是通过它来识别的,如果上面你写错了,不会有任何问题,但是在运行的时候就会有问题,提示你没有指定宽度等什么.这个是不用联

  • ionic2 tabs使用 Modal底部tab弹出框

    项目要实现一个功能,在首页底部中间的tab弹出一个页面,而且是没有底部栏的,而不是像平常滑动的一个子页面. 像这样: 做法其实很简单 1.修改tabs.html中的tab,去掉[root]="tab2root"属性,就不会显示子页面了 2.添加(ionSelect)方法,点击这个tab按钮的事件,用来显示你的弹出modal 去掉之前: <ion-tab [root]="tab5Root" tabIcon="call" (ionSelect)

  • 微信小程序 Toast自定义实例详解

    微信小程序 Toast自定义实例详解 实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx

  • jQuery EasyUI 选项卡面板tabs的使用实例讲解

    1. 对选项卡面板区域 div 设置 class="easyui-tabs" 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fit 为 true ,自适应父容器大小 4. 设置选项卡 closable 为 true ,添加可关闭按钮 5.通过超链接,点击后,添加新的选项卡 语法: 页面对象.easyui 插件(方法名, 参数) ; <!DOCTYPE html> <html> <hea

  • Android 8.1隐藏状态栏图标的实例代码

    近期客户需求,状态栏只显示时间和电池图标,如图 状态栏图标的布局文件在frameworks\base\packages\SystemUI\res\layout\status_bar.xml,主要包括通知,定位,蓝牙,信号,时间,电池等图标,只要在相应的布局文件中加入属性android:visibility="invisible" 或者"gone"即可 <?xml version="1.0" encoding="utf-8"

  • 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

    把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//

随机推荐