ionic-CSS：Tabs(选项卡)

Tabs(选项卡)

ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。

*** 要想知道怎样创建Tab页面请看 Tabs 文档.

以下选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。

<div class="tabs"> 
  <a class="tab-item"> 主页 </a> 
  <a class="tab-item"> 收藏 </a> 
  <a class="tab-item"> 设置 </a>
</div>

默认情况，选项卡颜色为default，你可以设置以下不同颜色样式： tabs-default tabs-light tabs-stable tabs-positive tabs-calm tabs-balanced tabs-energized tabs-assertive tabs-royal tabs-dark

要隐藏选项卡栏，可使用tabs-item-hide 类。 无论什么时候只要你使用tabs, 记住添加has-tabs CSS 类到你的ion-content.

---

Icon-only Tabs(图标选项卡)

在tabs 类后添加tabs-icon-only 类可设置只显示图标选项卡。

<div class="tabs tabs-icon-only"> 
  <a class="tab-item"> 
    <i class="icon ion-home"></i> 
  </a> 
  <a class="tab-item"> 
    <i class="icon ion-star"></i> 
  </a> 
  <a class="tab-item"> 
    <i class="icon ion-gear-a"></i> 
  </a>
</div>

---

Top Icon Tabs(顶部图标+文字选项卡)

在tabs 类后添加 tabs-icon-top 类可设置顶部图标+文字选项卡。

<div class="tabs tabs-icon-top"> 
  <a class="tab-item"> 
    <i class="icon ion-home"></i> 
    Home 
  </a> 
  <a class="tab-item"> 
    <i class="icon ion-star"></i> 
    Favorites 
  </a> 
  <a class="tab-item"> 
    <i class="icon ion-gear-a"></i> 
    Settings 
  </a>
</div>

---

Left Icon Tabs(左侧图标+文字选项卡)

在 tabs 类后添加 tabs-icon-left 类可设置左侧图标+文字选项卡。

<div class="tabs tabs-icon-left"> 
  <a class="tab-item"> 
    <i class="icon ion-home"></i> 
    Home 
  </a> 
  <a class="tab-item"> 
    <i class="icon ion-star"></i> 
    Favorites 
  </a> 
  <a class="tab-item"> 
    <i class="icon ion-gear-a"></i> 
    Settings 
  </a>
</div>

---

Striped Style Tabs(条纹样式选项卡)

可以在带有tabs 的样式名的元素上添加 tabs-striped 来实现像 Android 风格的tabs。
也可以添加 tabs-top 来实现选项卡在页面顶部。
条纹选项卡颜色可通过tabs-background-{color} 和 tabs-color-{color} 来控制,{color}
值可以是：default, light, stable, positive, calm, balanced,energized,assertive, royal, or dark
注意：如果要再选项卡上设置头部标题，需要使用 has-tabs-top 类。

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light"> 
  <div class="tabs"> 
    <a class="tab-item active" href="#"> 
      <i class="icon ion-home"></i> 
      Test 
    </a>
    <a class="tab-item" href="#"> 
      <i class="icon ion-star"></i> 
      Favorites 
    </a> 
    <a class="tab-item" href="#"> 
      <i class="icon ion-gear-a"></i> 
      Settings 
    </a> 
  </div> 
</div> 
<div class="tabs-striped tabs-color-assertive"> 
  <div class="tabs"> 
    <a class="tab-item active" href="#"> 
      <i class="icon ion-home"></i> 
      Test 
    </a> 
    <a class="tab-item" href="#"> 
      <i class="icon ion-star"></i> 
      Favorites 
    </a> 
    <a class="tab-item" href="#"> 
      <i class="icon ion-gear-a"></i> 
      Settings 
    </a> 
  </div> 
</div>