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 插件,并且使用了一个获取页面元素的方法,给自己的一个变量 ...
随机推荐
- Provisioning Services 7.6 入门到精通系列之二:基础架构环境
在阅读本博文之前强烈建议同学们提前了解Citrix XenDesktop和XenApp等产品,并对PVS相关产品概念架构有深入的理解. 1.1 以下是在上一章节中规划的本次测试环境的配置清单(后续 ...
- Flapper Bird的学习笔记(二)
因为有一个超屌的梦想,所以就绝不会做一个孬种的追梦人! 本章节主要目的: 实现小鸟的飞行. 实现管道的随机出现. 实现相机跟随. 上次主要是场景的布置,这节全力拿下代码. 1.小鸟飞行(一种制作2D动 ...
- Myeclipse安装SVN插件(转)
方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Add Site 打开对话框,在对话框Name输入Sv ...
- OC NSString 基本操作(用到补充持续更新)
1.将字符串拆分成数组 NSString *string = @"1,2,3,4"; NSArray *array = [string componentsSeparatedByS ...
- Homebrew安装及使用
简介 Homebrew官网:http://brew.sh/index_zh-cn.html Homebrew是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件,相当于linux ...
- GridView获取列子段的几种途径
GridView是ASP.NET中功能强大的数据显示控件,它的RowDataBound事件为我们提供了方便的控制行.列数据的途径. 要获取当前行的某个数据列,我在实践中总结有如下几种方法: 1. Ce ...
- 读取微博feed伪代码
// 读取我的好友fids $db = new DB(); $mc = new Memcached(); $_uid = 1; // my uid $sql = "select * from ...
- java常用注释
@see 加入超链接 @see 类名 @see 完整类名 @see 完整类名#方法名 @version 版本信息 @author 作者信息 @param 参数名 说明 @return 说明 @exce ...
- VMware下利用ubuntu13.04建立嵌入式开发环境之二
之前在VMware中安装完Ubuntu系统,接下来开始设置开发中用到的服务和工具,以及系统设计. 1.安装VMware工具:打开VMware软件,在菜单->VM->Install VMwa ...
- net之工作流工程展示及代码分享(记录)
http://www.cnblogs.com/thanks/p/4183235.html