ionic的tabs
<ion-tabs class="tabs-icon-top/bottom(决定这个tabs是置于上面还是底部) tabs-color-active-positive(图标与字体色) tabs-balanced(选项卡总的一横栏背景色)" >
<ion-tab title="tab1(tab上显示tab文字)" icon-on="点击时出现的图标" icon-off="取消点击时出现的图标" href="#/tab/tab1(点击后需要 跳转的路径)">
</ion-tab>
</ion-tabs>
PS :
1.在 tabs 类后添加 tabs-icon-only 类可设置只显示图标选项卡。
2.在tabs行 添加tabs-striped 可在tab上添加一横的效果
3.如果tab在顶部,要放置在底部,可在app.js中的config中配置该项
$ionicConfigProvider.platform.android.tabs.style('standard');适用于安卓
4.如何修改tab中的图片:首先写个该图片作为背景的样式,定义好背景的大小。,如下:
.tabsHome1{
background: url('../img/home1.png') no-repeat center;
background-size: 0.8em 0.8em;
}
然后将样式放进icon-on中即为选中状态的图片了
icon-on="tabsHome1"
ionic的tabs的更多相关文章
- 在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower
更新框架: meteor update meteor框架的优点不言而喻,它大大减轻了App前后端开发的负担,今年5月又获得B轮2000万融资,代表了市场对它一个免费.开源开发框架的肯定.cordova ...
- ionic Hide tabs 实现
1.指令代码 directiveMod.directive('hideTabs',function($rootScope){ return { restrict:'AE', link:function ...
- ionic隐藏tabs方法
<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </io ...
- Ionic android 底部tabs
ionic android tabs 默认显示在上部,如果要跟苹果一起统一在底部,那么可以在app.js添加配置 .config(function($ionicConfigProvider) { $i ...
- [转]Ionic系列——CodePen上的优秀Ionic_Demo
本文转自:http://my.oschina.net/u/1416844/blog/514361?fromerr=bbFC5JIl 案例网站 Slidebox with Dynamic Slides ...
- ionic安装及测试
官方教程: http://ionicframework.com/getting-started/ 官方教程写得比较简单,简单来说就是 1)安装nodejs(安装方法:http://www.cnblog ...
- ionic学习笔记—常用命令
Ionic CLI介绍 Ionic CLI是开发Ionic应用程序过程中使用的主要工具.它就像一个瑞士军刀:它在一个界面下汇集了大量工具. CLI包含许多对Ionic开发至关重要的命令,例如start ...
- ionic 进入多级目录以后隐藏底部导航栏(tabs)(完美解决方案)
公司开始使用ionic开发项目,在此记录下把遇到的问题,网上有大牛已经把解决方法整出来了,不过记录在自己这里方便查阅. 这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在 ...
- Ionic的页面堆栈与Tabs菜单相遇的问题(页面堆栈有多个)
本来的需求: 新建的Ionic项目是Tabs菜单,假设有两个选项卡 A 和 B(从左到右),对应的两个页面的代码完全一样,使用了echarts 插件,并且使用了一个获取页面元素的方法,给自己的一个变量 ...
随机推荐
- Fair Scheduler中的Delay Schedule分析
延迟调度的主要目的是提高数据本地性(data locality),减少数据在网络中的传输.对于那些输入数据不在本地的MapTask,调度器将会延迟调度他们,而把slot分配给那些具备本地性的MapTa ...
- Web安全
随着Web2.0.网络社交等一系列新型的互联网产品的诞生,基于Web环境的互联网应用越来越广泛,企业信息化的过程中,越来越多的应用都架设在Web平台上.Web业务的迅速发展吸引了黑客们的强烈关注,接踵 ...
- Bootstrap<基础十三> 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...
- Maven搭建SSH环境
一.新建maven项目 选中maven-aechetype-webapp group Id一般为公司域 :Artifact Id相当于项目名称 :version不需要更改:Package不使用默认,手 ...
- .net版高斯模糊算法
最近挺多人找高斯算法,本人贴上一个高斯模糊算法类,希望可以帮助到大家.算法的效率还是可以接受的. #region 高斯模糊算法 /// <summary> /// 高斯模糊算法 /// & ...
- Sqrtx
我只能想出二分的方法,而且还不一定能写出最简洁的代码.无论刷多少遍,牛顿迭代法我都想不到,莫名有种悲哀的感觉:智力是硬伤啊.就算如此,却还要一遍遍不厌其烦地刷,这才是最悲剧的.多说无益,上代码. 二分 ...
- Ant_的最完整build.xml解释
Ant的概念 Make命令是一个项目管理工具,而Ant所实现功能与此类似.像make,gnumake和nmake这些编译工具都有一定的缺陷,但是Ant却克服了这些工具的缺陷.最初Ant开发者在开发跨平 ...
- 如何使用.NET开发全版本支持的Outlook插件产品(二)——完善插件
插件项目所有代码都已经上传至 https://github.com/VanPan/TestOutlookAdding 勿在浮砂筑高台--定位错误 在介绍后面的插件开发技术之前,让我们先来看看已经达到的 ...
- .Net生成HTML的三种方法
一.在服务器上指定aspx网页,生成html静态页 public partial class Default2 : System.Web.UI.Page { protected void Page_L ...
- shopex 小知识
产品链接: http://www.--/product-172.html 中间的数字代表 sdb_goods 表中 的 goods_id ... 表示数据库里的产品 id. 分类链接: http: ...