文档章节

ion-tab 隐藏、禁止

心有灵犀
 心有灵犀
发布于 2015/06/05 23:29
字数 222
阅读 98
收藏 0

有些情况下,可能需要临时性地隐藏或禁止某个选项页,ion-tab提供了两个 属性用来实现这个功能:

  • hidden - 隐藏

hidden属性是当前作用域上的表达式。 当其值为true时,选项页将不可见

  • disabled - 禁止

disabled属性是当前作用域上的表达式。当值为true时,选项页将不响应 用户的点击

示例代码:

<!DOCTYPE html>
<html ng-app="ionic">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script type="text/javascript" src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0/css/ionic.min.css">
</head>
<body ng-app="ionic">
	<ion-header-bar class="bar-positive">
		<h1 class="title">ion-tabs : hidden | disabled</h1>
	</ion-header-bar>
	<ion-tabs class="tabs-positive tabs-striped">
		<ion-tab title="tab1">
			<ion-view>
				<ion-content class="calm-bg">
					tab 1 content
				</ion-content>
			</ion-view>
		</ion-tab>
		<ion-tab title="tab2">
			<ion-view>
				<ion-content class="balanced-bg">
					tab 2 content
				</ion-content>
			</ion-view>
		</ion-tab>
		<ion-tab title="tab3"  disabled="true">
			<ion-view>
				<ion-content class="energized-bg">
					tab 3 content
				</ion-content>
			</ion-view>
		</ion-tab>
	</ion-tabs>
</body>
</html>


本文转载自:http://www.hubwiz.com/class/55010505e564e5172c0b9405

上一篇: ion-tab 事件
心有灵犀
粉丝 17
博文 28
码字总数 301
作品 0
武汉
程序员
私信 提问
Ionic系列——CodePen上的优秀Ionic_Demo

案例网站 Slidebox with Dynamic Slides Ionic UL search example Ionic Accordian ion-affix performance demo (就是这个栏目下的标题一直显示在最上面) Button Bar as Top Tabs FAB Men......

龙马行空
2015/10/08
31.2K
8
ionic入门之AngularJS扩展

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生A...

笔阁
2015/05/04
8.4K
4
ionic入门之AngularJS扩展(一)//HTML5移动开发

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生A...

秦无炎
2016/12/20
39
0
ionic tab项目 对头部导航栏的全局定义和局部定义

一,在入口程序 index.html中 <body ng-app="myApp"> <ion-nav-bar class="bar-dark"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </bod......

我有我
2016/04/13
1K
0
ionic 在ios真机或模拟器上出现的顶部tabs偏移问题

这是ios模拟器上出的问题,真机也会这样,但是在浏览器上查看没有问题,andriod也是显示正常的 ?? 在当前页面代码为: .....

iyibo
2016/03/30
748
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
今天
4
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
4
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部