menu

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.

Ionic Tabs

Try it »

The above example will give following output-

Ionic Tabs Example

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

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

Try it »

The above example will give following output-

Ionic tab with icons

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

Try it »

The above example will give following output-

colored tabs in ionic