<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ionic Tabs Test</title>
<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
</head>
<body>
<div class="bar bar-header has-tabs-top bar-positive">
<div class="h1 title">条纹样式选项卡</div>
</div>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
测试
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item active" href="#">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
</div>
<div class="tabs-striped tabs-color-assertive">
<div class="tabs tabs-icon-top">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
测试
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
</div>
</body>
</html>
实现效果:
底部Tabs实现代码:
<div class="tabs-striped tabs-color-assertive">
<div class="tabs tabs-icon-top">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
测试
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
</div>
其中最外层<div></div>class属性表示:
tabs-striped:条纹样式
tabs-color-assertive:选项卡颜色
次外层<div></div>class属性表示:
tabs:表示为选项卡,若去除,则选项卡消失
tabs-icon-top:表示icon位于文字的顶部
若将最外层<div></div>中的class值移到次外层<div></div>的class值中或者相反,则显示效果如下:
如果要在顶部选项卡上设置头部标题,需要使用 在标题<div>的class里添加has-tabs-top,顶部选项卡<div>如下:
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
tabs-top:实现选项卡在页面顶部
tabs-background-positive:设置选项卡背景颜色
tabs-color-light:设置文本颜色