<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的更多相关文章

  1. 在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower

    更新框架: meteor update meteor框架的优点不言而喻,它大大减轻了App前后端开发的负担,今年5月又获得B轮2000万融资,代表了市场对它一个免费.开源开发框架的肯定.cordova ...

  2. ionic Hide tabs 实现

    1.指令代码 directiveMod.directive('hideTabs',function($rootScope){ return { restrict:'AE', link:function ...

  3. ionic隐藏tabs方法

    <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </io ...

  4. Ionic android 底部tabs

    ionic android tabs 默认显示在上部,如果要跟苹果一起统一在底部,那么可以在app.js添加配置 .config(function($ionicConfigProvider) { $i ...

  5. [转]Ionic系列——CodePen上的优秀Ionic_Demo

    本文转自:http://my.oschina.net/u/1416844/blog/514361?fromerr=bbFC5JIl 案例网站 Slidebox with Dynamic Slides ...

  6. ionic安装及测试

    官方教程: http://ionicframework.com/getting-started/ 官方教程写得比较简单,简单来说就是 1)安装nodejs(安装方法:http://www.cnblog ...

  7. ionic学习笔记—常用命令

    Ionic CLI介绍 Ionic CLI是开发Ionic应用程序过程中使用的主要工具.它就像一个瑞士军刀:它在一个界面下汇集了大量工具. CLI包含许多对Ionic开发至关重要的命令,例如start ...

  8. ionic 进入多级目录以后隐藏底部导航栏(tabs)(完美解决方案)

    公司开始使用ionic开发项目,在此记录下把遇到的问题,网上有大牛已经把解决方法整出来了,不过记录在自己这里方便查阅. 这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在 ...

  9. Ionic的页面堆栈与Tabs菜单相遇的问题(页面堆栈有多个)

    本来的需求: 新建的Ionic项目是Tabs菜单,假设有两个选项卡 A 和 B(从左到右),对应的两个页面的代码完全一样,使用了echarts 插件,并且使用了一个获取页面元素的方法,给自己的一个变量 ...

随机推荐

  1. HDU 5010 Get the Nut(2014 ACM/ICPC Asia Regional Xi'an Online)

    思路:广搜, 因为空格加上动物最多只有32个那么对这32个进行编号,就能可以用一个数字来表示状态了,因为只有 ‘P’   'S' 'M' '.' 那么就可以用4进制刚好可以用64位表示. 接下去每次就 ...

  2. Jmail组件-----发送email

    jmail是一个第三方邮件操作组件,通常位于web服务器端,和站点程序紧密配合来接收及提交邮件到邮件服务器的控件,让网站拥有发送邮件既接收邮件的功能. 之所以想尝试它的理由呢 是因为----jmail ...

  3. ROS语音交互——科大讯飞语音合成TTS(二)

    之前我用过科大讯飞的语音包,为了记录一下我重新使用一下 首先注册科大讯飞账号及应用,以后每个下载的在线使用SDK都是以此账户ID登录讯飞语音服务器. 下载科大讯飞在线合成包. $ unzip Linu ...

  4. mongodb 备份 还原 导出 导入

    张映 发表于 2013-12-03 分类目录: nosql 标签:mongodb, 备份, 导入, 导出, 还原 mongodb数据备份和还原主要分为二种,一种是针对于库的mongodump和mong ...

  5. Eclipse智能提示及快捷键

    1.java智能提示 (1). 打开Eclipse,选择打开" Window - Preferences". (2). 在目录树上选择"Java-Editor-Conte ...

  6. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  7. java web学习之表单

    前台页面与后台页面的数据又form表单完成. <form  name ="form1"  method="post" action="index ...

  8. python 类以及单例模式

    python 也有面向对象的思想,则一切皆对象 python 中定义一个类: class student: count = 0         books = [] def __init__(self ...

  9. MYSQL5.7无法启动服务原因及解决方案

    mysql5.7安装完成后,想要把它发布成windows服务: 首先,应该配置新的配置文件,然后将cmd打开到安装目录的bin文件,键入: mysqld --default-file="D: ...

  10. javap查看class文件

    通过JVM编译java文件生成class字节码文件,很多时候很想用工具打开看看,目前还不清楚哪一个软件专门查看class文件的,但是通过windows下的javap命令可以查看详细的class文件 S ...