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
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
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
