In this article, you will get to know about navigating tabs in ionic. Tabs can be used to navigate from one page to another inside your application.

Using Tabs:
You can add tabs in ionic application by using ion-tabs for container element and ion-tab for content element.
HTML:

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing"
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home"
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star"
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

These are the attributes for ion-tab element:

• title It defines title for tab.
• href It is link to navigate tabs.
• icon It gives icon for tab.
• icon-on It is icon when tab is selected.
• icon-off It is icon when tab is not selected.
• badge It is expression that defines badge for the tab.
• badge-style It is expression that defines badge style for the tab.
• on-select It is expression when tab is selected.
• on-deselect It is expression when tab is deselected.
• hidden It is used when you need to hide the tab.
• disabled It is used when you want to disable the tab.

These tabs also defines some delegate service to get control of all tabs inside the app. This service can be injected to controller and it provides methods as follows:

selectedIndex() : It is type of number that    returns the index of the selected tab.
$getByHandle(parameter1) : It is string used to connect methods to the particular tab view with the same handle. Handle can be added to ion-tabs by using delegate-handle = "my-handle" attribute.    $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();