ion-tab 隐藏、禁止

有些情况下,可能需要临时性地隐藏或禁止某个选项页,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>


你可能感兴趣的:(ion-tab 隐藏、禁止)