默認情況，選項卡顏色為默認，你可以設(shè)置以下不同顏色樣式：tabs-default ，tabs-light ，tabs-stable ，tabs-positive ，tabs-calm ，tabs-balanced ，tabs-energized ，tabs-assertive ，tabs-royal ，tabs-dark。

要隱藏選項卡欄，可使用 tabs-item-hide 類。

在 tabs 類后添加 tabs-icon-only 類可設(shè)置只顯示圖標(biāo)選項卡:

<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>

???

左側(cè)圖標(biāo)+文字選項卡

在 tabs 類后添加 tabs-icon-left 類可設(shè)置左側(cè)圖標(biāo)+文字選項卡。?

<div class="tabs tabs-icon-left">

   <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>

       設(shè)置

   </a>

</div>

??

條紋樣式選項卡:

可以在帶有 tabs 的樣式名的元素上添加 tabs-striped 來實現(xiàn)像 Android 風(fēng)格的 tabs。也可以添加 tabs-top 來實現(xiàn)選項卡在頁面頂部。

條紋選項卡顏色可通過 tabs-background-{color} 和 tabs-color-{color} 來控制， {color} 值可以是：default, light, stable, positive, calm, balanced, energized, assertive, royal, 或 dark。

注意：如果要再選項卡上設(shè)置頭部標(biāo)題，需要使用 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>?

?