tabs-ionic

Tabs are very popular when it comes to bootstrap. Ionic tabs are also similar to the bootstrap tabs. But it gives seamless navigation experience between the screens.

Like list and list-item classes, we have tabs and tab-item classes.


<div class="tabs">

 <a class="tab-item">

    Home

 </a>

 <a class="tab-item">

    Favorites

 </a>

 <a class="tab-item">

    Settings

 </a></div>

Tabs can be styled using Ionic standard color classes. Say, for example, tabs-positive, tabs-calm, etc.

Tabs occupy the bottom of the app when you place the above code.

 

Icon-only Tabs

We can use icon instead of text in the tab. This can be achieved by using tabs-icon-only class for each tab-item class


<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

An icon can be placed at the top and text at the bottom by using tabs-icon-top along with the tabs class.


<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

Use tabs-icon-left class to display the icon on the left side with text.


<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

To get Android-styled tabs, use tabs-striped with tabs class. Active class is used to indicate the active tab.


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

Get granular color control for striped tabs with the tabs-background-{color} and tabs-color-{color} classes, where {color} is any of the Ionic color swatches.

default, light, stable, positive, calm, balanced, energized, assertive, royal, or dark.