Ionic Tab

From WikiOD

Ionic tab[edit | edit source]

Ionic tabs are buttons or links arranged horizontally to switch navigation between pages. It can contain a combination of text and icons, and is a popular navigation method on mobile devices.

The following tab container uses the tabs class, and each tab uses the tab-item class. By default, the tabs are text and have no icons.

Instance[edit | edit source]
 <code><div class="tabs"></code>
   <a class="tab-item">
     Home page
   </a>
   <a class="tab-item">
     collect
   </a>
   <a class="tab-item">
     set up
   </a>
 <code></div></code>

By default, the tab color is the default. You can set the following different color styles: tabs-default, tabs-light, tabs-stable, tabs-positive, tabs-calm, tabs-balanced, tabs-energized, tabs-assertive, tabs -royal, tabs-dark.

To hide the tab bar, use the tabs-item-hide class.

Icon tab[edit | edit source]

Add the tabs-icon-only class after the tabs class to set only the icon tabs to be displayed.

 <code><div class="tabs tabs-icon-only"></code>
   <a class="tab-item">
     <code><i class="icon ion-home"></i></code>
   </a>
   <a class="tab-item">
     <code><i class="icon ion-star"></i></code>
   </a>
   <a class="tab-item">
     <code><i class="icon ion-gear-a"></i></code>
   </a>
 <code></div></code>
Top icon + text tab[edit | edit source]

Add the ttabs-icon-top class after the tabs class to set the top icon + text tab.

 <code><div class="tabs tabs-icon-top"></code>
   <a class="tab-item" href="#">
     <code><i class="icon ion-home"></i></code>
     Home page
   </a>
   <a class="tab-item" href="#">
     <code><i class="icon ion-star"></i></code>
     collect
   </a>
   <a class="tab-item" href="#">
     <code><i class="icon ion-gear-a"></i></code>
     set up
   </a>
 <code></div></code>
Left icon + text tab[edit | edit source]

Add the ttabs-icon-left class after the tabs class to set the left icon + text tab.

 <code><div class="tabs tabs-icon-left"></code>
   <a class="tab-item">
     <code><i class="icon ion-home"></i></code>
     Home page
   </a>
   <a class="tab-item">
     <code><i class="icon ion-star"></i></code>
     collect
   </a>
   <a class="tab-item">
     <code><i class="icon ion-gear-a"></i></code>
     set up
   </a>
 <code></div></code>
Stripe style tab[edit | edit source]

You can add tabs-striped to elements with tabs style names to achieve Android-style tabs. You can also add tabs-top to implement tabs at the top of the page.

The color of the stripe tab can be controlled by tabs-background-{color} and tabs-color-{color}. The value of {color} can be: default, light, stable, positive, calm, balanced, energized, assertive, royal, or dark.

Note: If you want to set the header title on the tab, you need to use the has-tabs-top class.

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