ionic .tab-striped .tabs: 条带风格选项卡
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
.tab-striped .tabs: 条带风格选项卡
条带风格的选项卡起源于Android平台，它使用一个细长的条带表示选项的选中状态：
在ionic中，使用.tabs-striped样式声明条带风格选项卡：
<any class="tabs-striped"> <any class="tabs"> <any class="tab-item">...</any> <any class="tab-item">...</any> ... </any></any>
<!DOCTYLE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body class="dark-bg">
<div class="tabs-striped tabs-top tabs-dark tabs-icon-only">
<div class="tabs">
<a class="tab-item active">
<i class="icon ion-ios-telephone"></i>
</a>
<a class="tab-item">
<i class="icon ion-ios-clock"></i>
</a>
<a class="tab-item">
<i class="icon ion-ios-person"></i>
</a>
</div>
</div>
<div class="tabs tabs-dark tabs-icon-only">
<a class="tab-item">
<i class="icon ion-ios-search"></i>
</a>
<a class="tab-item active">
<i class="icon ion-ios-telephone"></i>
</a>
<a class="tab-item" href="#">
<i class="icon ion-backspace"></i>
</a>
</div>
</body>
</html>