Ionic Tabs - Ionic

What are tabs in Ionic Framework?

For the purpose of mobile navigation Ionic tabs are used. For different platforms, Ionic tabs styling is optimized. Tabs are placed at the top of the screen for Android devices and they are at the bottom of the screen for IOS.

How to create simple Tabs in Ionic Framework?

With tabs class simple tabs can be created. Tab-item elements need to be added using the tabs class. For tabs items <a> tags are used as tabs are meant for navigation purpose. The following example displays menu with four tabs.

The screen produced by the above code appears as:

Ionic Tabs

How to add Icons to Tabs in Ionic Framework?

The tabs-icon-only class is used to have icons without any text and should be added after tabs class. Add the icons which are desired to display.

The screen produced by the above code appears as:

Tabs Icon

Icons and text can be added together. To place the icon on the top and on the left side tabs-icon-top and tabs-icon-left classes are used. By the following example a new class is added and the icons are placed above the text.

The screen produced by the above code appears as:

Tabs Icon Top

What are Stripped Tabs in Ionic Framework?

Container is added around the tab with the tabs-stripped class and thus Stripped tabs can be created. This class allows usage of tabs-background and tabs-color prefixes for adding some of The Ionic colors to tabs menu. The below example use tabs-background-positive (blue) class to style background of our menu, and tabs-color-light (white) to style tab icons. It is noticed that the second tab is active and the other two are not.

The screen produced by the above code appears as:

Tabs Stripped

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Ionic Topics