Available in:

Ionic-Angular 0.9.x

Tab Bar Controller

The Tab Bar Controller powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed through:

<ion-tabs>

Attribute Type Default Description
tabs-type string tabs-positive The type of tabs. See the tabs component documentation
type string tabs-icon-only The style of tabs. See the tabs component documentation.
animation string The animation to use for transitions between tabs.

<ion-tab>

Attribute Type Default Description
title string
icon string The icon to use for the tab. If you want to change the icon while the tab is selected, use icon-on and icon-off instead.
icon-on string The icon to use when the tab is selected.
icon-off string The icon to use while the tab is not selected.
badge expression The 'badge' to put on the tab, with its content.
badge-style string If 'badge' attribute is provided, sets the style of the badge. For example, 'badge-assertive'.
left-buttons expression The left buttons to put on the ion-nav-bar while this tab is selected.
right-buttons expression The right buttons to put on the ion-nav-bar while this tab is selected.
<ion-tabs tabs-type="tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- Tab 1 content -->
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>

To use the tabs, put the content of each tab right into the <ion-tab> tag, like this:

<ion-tabs tabs-type="tabs-icon-only">
  <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <ion-header-bar type="bar-positive" title="'Home'"></ion-header-bar>
    <ion-content has-header="true">
      <h2>Home Content</h2>
    </ion-content>
  </ion-tab>
</ion-tabs>

Notice we set the title of the <ion-header-bar> using single quotes (title="'Home'") since the title is an angular expression and can be bound to a scope value for dynamic titles.

The Tab Bar also emits events when tabs change. To know when a tab is shown, listen for the tab.shown event, and the tab.hidden event for when it is hidden:

<ion-tabs tabs-type="tabs-icon-only">
  <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ng-controller="HomeCtrl">
    <ion-header-bar type="bar-positive" title="'Home'"></ion-header-bar>
    <ion-content has-header="true">
      <h2>Home Content</h2>
    </ion-content>
  </ion-tab>
</ion-tabs>
angular.module('test', ['ionic'])
.controller('HomeCtrl', function($scope) {
  $scope.$on('tab.shown', function() {
    // Maybe load some content here
  });
  $scope.$on('tab.hidden', function() {
    // Perhaps cycle out some data in memory here
  });
});