最新消息:欢迎大家来到小月博客

ionic之自定义 ion-tabs 图标

web前端 小月 941浏览 0评论

ionic之自定义 ion-tabs 图标

 

这个文章积攒了好久了,每次想要写的时候都会有事情打断,挺郁闷的.

前几天我们微信公众号改版,正好tabs的小图标设计师也更换了.当时真心不知道怎么修改. 但是事情来总要想处理的办法,我看文档没有自定义的.没办法就百度吧,没想到真的有关于怎么写自定义小图标的,今天分享给大家.

Ionic框架内置了很多矢量图标,可以应用于 ion-tabs 多标签切换中。
用法如下:

<ion-tabs class="tabs-positive tabs-icon-only">

<ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
 <!-- 标签 1 内容 -->
 </ion-tab>

<ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
 <!-- 标签 2 内容 -->
 </ion-tab>

<ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
 <!-- 标签 3 内容 -->
 </ion-tab>

</ion-tabs>

效果如下:

ion-tabs

这个样子是不是很丑啊? 哈哈…….不美观吧! 有什么方法可以个性化tabs标签图标? 譬如:

tab2

复杂方法可以搜“ionic自定义图标”。
简单方法是直接借用 ion-tab 模板,“icon-on” 以及“icon-off”用自定义的class代替ion-*图标系列:
<ion-tabs class="tabs-icon-top tool-bar" ng-class="{'tabs-item-hide': hideTabs}">
 <ion-tab title="推广" icon="bar-home-on" icon-on="bar-home-on" icon-off="bar-home-off" href="#/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> 
 <ion-tab title="收入" icon-on="bar-money-on" icon-off="bar-money-off" href="#/money"> <ion-nav-view name="money-tab" /> </ion-tab> 
 <ion-tab title="" icon-on="bar-service-on" icon-off="bar-service-off" href="#/service"> <ion-nav-view name="message-tab" /> </ion-tab> 
 <ion-tab title="消息" icon-on="bar-msg-on" icon-off="bar-msg-off" href="#/message"> <ion-nav-view name="message-tab" /> </ion-tab> 
 <ion-tab title="我的" icon-on="bar-mine-on" icon-off="bar-mine-off" href="#/user"> <ion-nav-view name="user-tab" /> </ion-tab> 
</ion-tabs>

css:

.tab-item i.icon {
 margin-top: 1px;
}
.bar-home-on {
 background: url(images/bar-home.png) no-repeat center top
}

.bar-home-off {
 background: url(images/bar-home-off.png) no-repeat center top
}
大致的方法就是如上, 大家有需求的时候灵活运用吧. 祝大家学习愉快!

转载请注明:小月博客 » ionic之自定义 ion-tabs 图标

一点心意×
 收藏 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (3)

  1. 岁月如梭,中秋已过,春节未至,天天快乐! 丙申年(猴)八月廿十 2016-9-20
    增达信购5个月前 (09-20)回复
  2. 我对你博客的爱,你永远不会明白!
    增达信购5个月前 (09-21)回复
    • 就让我永远不明白好了,这样子你也可以一直爱下去
      小月5个月前 (09-21)回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册