Javatpoint Logo
Javatpoint Logo

Ionic Tabs

The Ionic tabs are mainly used for mobile navigation. The styling of Ionic tabs is different for different operating systems. For example, it is placed at the top of the screen in android devices while it is placed at the bottom in iOS devices. We can access the Ionic tabs by using the standard <ion-tabs> component. This component works as a router outlet to handle navigation. It does not provide any mechanism to switch between tabs. If you need to do switch between tabs, use <ion-tab-bar> as a direct child element of <ion-tabs>.

You can also use both <ion-tabs> and <ion-tab-bar> as a standalone elements. Both do not depend on each other to work, but it can be used together to implement tab-based navigation that behaves like a native app. The <ion-tab-bar> component needs a slot to be projected to the right place in an <ion-tabs> component.

Ion-tab-bar

It is a UI component which contains a set of tab buttons. This tab must be provided inside of tabs to communicate with each tab.

Ion-tab-button

It is a UI component which is placed inside of a tab bar. It specifies the layout of the icon and label and connects to the tab view.

Simple Tabs

Simple tabs menu can be created by using <ion-tabs> and <ion-tab-bar> component. The following example shows how tabs created in Ionic.

Example

Output

Ionic Tabs

Adding Icons

Ionic also provides an <ion-icon> element for adding icons to the tabs. We can understand it with the following example.

Example

Output

Ionic Tabs

Tabs Badges

It is an attribute that contains a number or any other characters. It can be used as a notification which tells that there is an additional item associated with an element and indicates how many items are associated.

Example

Output

Ionic Tabs
Next TopicIonic Checkbox




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA