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.

Ionic Tabs <div class="tabs"> <a class="tab-item"> Home </a> <a class="tab-item"> Profile </a> <a class="tab-item"> About </a> </div> Try it »

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.

Ionic Tabs Top Example <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> Try it »

The above example will give following output-

Tabs with icons

You can add icons in ionic framework as below –

Ionic Icons Tab Example <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> Try it »

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-

Tabs Color in Ionic Example <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> Try it »

The above example will give following output-

Advertisements

Add Comment

📖 Read More