ionic ion-tab图标修改, 自定义tab图标
2018-01-11 22:43
926 查看
遇到需要自定义tab图标很简单, 只需要自定义相应的css就可以了, 这里要注意的是如何调整背景图片的大小.
<ion-view hide-back-button="false"> <style> .ion-ios-home0 { background: url(img/home0.png) no-repeat 50% 50%; background-size: 20px 20px; } .ion-ios-book0 { background: url(img/book0.png) no-repeat center ; background-size: 20px 20px; } .ion-android-person0 { background: url(img/person0.png) no-repeat center ; background-size: 20px 20px; } .ion-ios-home1 { background: url(img/home1.png) no-repeat center ; background-size: 20px 20px; } .ion-ios-book1 { background: url(img/book1.png) no-repeat center ; background-size: 20px 20px; } .ion-android-person1 { background: url(img/person1.png) no-repeat center ; background-size: 20px 20px; } </style> <ion-tabs class="tabs-icon-top tabs-color-active-assertive tabs-light" ng-class="{'tabs-item-hide': $root.hideTabs}" delegateHandle="main"> <ion-tab title="首页" icon="ion-ios-home0" nav-direction="swap" icon-on="ion-ios-home1" href="#/home/index/code/"> <ion-nav-view name="tab-index"></ion-nav-view> </ion-tab> <ion-tab title="学习" icon="ion-ios-book0" nav-direction="swap" icon-on="ion-ios-book1" href="#/home/inread"> <ion-nav-view name="tab-inread"></ion-nav-view> </ion-tab> <ion-tab title="我的" icon="ion-android-person0" nav-direction="swap" icon-on="ion-android-person1" href="#/home/user-center"> <ion-nav-view name="tab-usercenter"></ion-nav-view> </ion-tab> </ion-tabs> </ion-view>
相关文章推荐
- 使用ionic开发手机app中,设置tab中的icon为自定义图标的方法
- ionic3 tab实现自定义图片替换字体图标
- ionic3 tab实现自定义图片替换字体图标
- 关于自定义tabbar修改字体颜色及图标选中颜色等方法的总结
- 修改ionic图标闪烁
- ionic App应用名字+应用图标+启动画的修改
- 修改自定义Webpart的默认图标
- ionic 2 修改程序图标及闪屏页
- ionic自定义图标心得分享
- ionic3自定义icon图标(简单版!!)
- ionic项目中使用自定义图标打包出现错误-broken import
- ionic2中实现上拉菜单并且修改默认样式也就是自定义样式。ActionSheets。以更换/上传头像为例.
- C# 自定义文件图标 双击启动 (修改注册表)
- 【ionic+angulajs】ion-tabs访问页面url不记录历史的方法(修改浏览器记录的历史url,改变goback的跳转)
- cnblog博客园自定义样式修改标签页的icon图标
- U盘图标自定义时不能修改图标?
- 使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
- ionic修改主图标
- 【2】Android Tablayout 自定义图标与文字搭配