ionic之自定义 ion-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>

对应效果：

不美观吧！有什么方法可以个性化tabs标签图标？譬如：

复杂方法可以搜“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
}

转载于:https://www.cnblogs.com/itman70s/p/ionic_bars.html

ionic之自定义 ion-tabs 图标相关推荐

微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...
计算机自定义桌面,如何自定义电脑桌面的图标显示
原标题:如何自定义电脑桌面的图标显示提升工作效率小妙招,值得收藏虽然现在有蛮多人早就更新好自己的电脑系统了,大多数人都已经习惯了Windows10系统的桌面显示.但是也还有很多用户的电脑桌面,还是 ...
自定义Launcher桌面图标无法加载的问题
通过之前的文章,我们知道在Launcher的源码中是通过加载default_workspace.xml这个配置文件来显示桌面的图标和小部件的,今天项目一测试,发现自定义的桌面图标加载不出来了,之前都是 ...
高德地图自定义点标记大小_高德地图自定义点标记图标大小
自定义点标记图标大小 //初始化地图对象,加载地图 var map = new AMap.Map("container", { resizeEnable: true, zoom:1 ...
如何设置自定义任务栏图标_如何为任何应用程序自定义Windows 7任务栏图标
如何设置自定义任务栏图标 Would you like to change out the icons on your taskbar with a beautiful set of icons th ...
如何设置自定义任务栏图标_轻松自定义Windows 7任务栏图标
如何设置自定义任务栏图标 Would you like to fully customize your Windows 7 icons without having to manually chang ...
将图片转换成svg文件，自定义icon小图标，svg速成
将图片转换成svg文件,自定义icon小图标,svg速成一.svg是什么? 二.操作步骤 1.进入网站 2.将svg复制 3.引用svg文件总结一.svg是什么? SVG是一种图像文件格式,它的 ...
matplotlib工具栏源码探析四（自定义工具项图标）
在matplotlib工具栏源码探析二(添加.删除内置工具项)和matplotlib工具栏源码探析三(添加.删除自定义工具项)两篇文章中,仔细观察会发现,不论内置工具项还是自定义工具项都没有图标,但是 ...
vue移动端ui框架vant如何自定义引入阿里巴巴图标库
vant如何自定义引入阿里巴巴图标库框架虽然本身有提供部分icon,但是很多时候都无法满足我们得需要,这个时候我们就需要自定义引入icon,这里我是使用的阿里巴巴图标库. 首先,我们先打开阿里巴巴图 ...

ionic之自定义 ion-tabs 图标

ionic之自定义 ion-tabs 图标相关推荐

最新文章

热门文章