Ionic Tabs

Ionic Tabs : Tabs are basically used for navigation in mobile device. It can be placed on the top or bottom. It can contain the the links icons in top or bottom. Tabs are beautiful ways used for navigation in mobile devices. Here we are going to explain the ionic tabs with example and demo.

Syntax for Ionic Tabs

The class .tabs is used to create the tabs. Items in tab are added using the .tab class. Tab can be positioned at top or bottom of the screen.

<div class="tabs">
   <a class="tab-item">
         Home
   </a>
   <a class="tab-item">
         Profile
   </a>
   <a class="tab-item">
         About
   </a>
</div>

The above example will give following output-

Ionic Tabs on Top of Screen

The class .tabs-icon-top is used to create the tabs on top of screen.

<div class="tabs tabs-icon-top">
   <a class="tab-item">
         Home
   </a>
   <a class="tab-item">
         Profile
   </a>
   <a class="tab-item">
         About
   </a>
</div>

The above example will give following output-

Tabs with icons

You can add icons in ionic framework as below –

<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-search"></i>
   </a>
   <a class="tab-item">
        <i class="icon ion-trash-a"></i>
   </a>
</div>

The above example will give following output-

Colored Tabs Example

You ca create colored tabs using the ionic color pattern. Here is list of colors available in ionic –

• tabs-default
• tabs-light
• tabs-stable
• tabs-positive
• tabs-calm
• tabs-balanced
• tabs-energized
• tabs-assertive
• tabs-royal
• tabs-dark

You Can use the above classes to add the color in Ionic Tabs-

<div class="tabs tabs-icon-only tabs-energized">
   <a class="tab-item">
        <i class="icon ion-home"></i>
   </a>
   <a class="tab-item">
        <i class="icon ion-search"></i>
   </a>
   <a class="tab-item">
        <i class="icon ion-trash-a"></i>
   </a>
</div>

The above example will give following output-

Add Comment

📖 Read More

• 1. Ionic Grid
• 2. Ionic Colors
• 3. Ionic Icons
• 4. Ionic Action Sheet
• 5. Ionic Backdrop

• 6. Ionic js Content
• 7. Ionic Ion-refresher
• 8. Ionic Events
• 9. Ionic Keyboard
• 10. Ionic loading