简介
ionic tab(选项卡、切换标签) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。ionic 的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。
选项卡
选项卡容器使用了 tabs类，每个选项卡使用tab-item类。默认情况下，选项卡是文本的，并没有图标。下面的程序出来只有一个空空的框框，不太好看，所以我把之前写的卡片部分填进去，最起码看起来不尴尬
<div class="bar bar-header">
<div class="h1 title">选项卡</div>
</div>
<div class="tabs">
<a class="tab-item" href="#">
主页
</a>
<a class="tab-item" href="#">
收藏
</a>
<a class="tab-item" href="#">
设置
</a>
</div>
这样看起来还是有些简陋了，那就大胆的润色一下吧。
在tabs类后添加tabs-icon-left类可设置左侧图标+文字选项卡。在tabs类后添加tabs-icon-top类可设置顶部图标+文字选项卡。在 tabs类后添加 tabs-icon-only 类可设置只显示图标选项卡。使用 tabs-assertive等类可以添加颜色。在带有tabs的样式名的元素上添加tabs-striped来实现点击风格的。
<div class="bar bar-header bar-royal">
<div class="h1 title">选项卡</div>
</div>
<div class="content has-header">
<div class="list card">
<div class="item item-avatar">
<img src="111.png">
<h2>邪人君子</h2>
<p>潇潇这一场雨落人间惆怅</p>
</div>
<div class="item item-body">
<img class="full-image" style="height:30%; width:100%" src="112.jpg">
<p>
侧径篮舁两眼明，出山犹带骨毛清。<br>白云笑我还多事，流水随人合有情。<br>
不及鸟飞浑自在，羡他僧住便平生。<br>未能与世全无意，起为苍生试一鸣。
</p>
<p>
<a href="#" class="subdued" style="text-color:red">13 喜欢</a>
<a href="#" class="subdued">5 评论</a>
</p>
</div>
</div>
</div>
<div class="tabs tabs-icon-top tabs-royal tabs-color-light tabs-striped">
<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>
网格
只需添加你想要的列，他们将平均占用可用空间。添加布局所需的列数，不要担心计算百分比，因为它会自动计算出来。row 样式指定行，col 样式指定列。
为了便于查看结构，添加边框和背景
.col{
background-color: #F9FAFB;
padding: 5px;
border: 1px solid #ddd;
border-radius: 2px;
text-align: center;
}
正常语法是这样的
<div class="row">
<div class="col">
<div class="col-demo">.col</div>
</div>
</div>
默认下列宽是平均分的，但是也可以自己制定列宽，就像这样
<div class="col col-50">
<div class="col-demo">.col.col-50</div>
</div>
当你觉得左边有些空格比较合适的话，也可以设置偏移量
<div class="col col-33 col-offset-33">
<div class="col-demo">.col</div>
</div>
看看效果吧
<div class="bar bar-header bar-royal">
<div class="h1 title">网格</div>
</div>
<div class="content has-header">
<div class="row">
<div class="col">
<div class="col-demo">.col</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
</div>
<div class="row">
<div class="col col-50">
<div class="col-demo">.col.col-50</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
</div>
<div class="row">
<div class="col col-75">
<div class="col-demo">.col.col-75</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
</div>
<div class="row">
<div class="col col-33 col-offset-33">
<div class="col-demo">.col</div>
</div>
<div class="col">
<div class="col-demo">.col</div>
</div>
</div>
<div class="row">
<div class="col col-33 col-offset-67">
<div class="col-demo">.col</div>
</div>
</div>
</div>
<div class="tabs tabs-icon-top tabs-royal tabs-color-light tabs-striped">
<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>
全文GG
网友评论