View Source   Improve this doc

ion-tabs
Delegate: $ionicTabsDelegate

See the Pen by Ionic (@ionic) on CodePen.

Powers a multi-tabbed interface with a Tab Bar and a set of “pages” that can be tabbed through.

Assign any tabs class to the element to define its look and feel.

For iOS, tabs will appear at the bottom of the screen. For Android, tabs will be at the top of the screen, below the nav-bar. This follows each OS’s design specification, but can be configured with the $ionicConfigProvider.

See the ionTab directive’s documentation for more details on individual tabs.

Note: do not place ion-tabs inside of an ion-content element; it has been known to cause a certain CSS bug.

Usage

<ion-tabs class="tabs-positive tabs-icon-top">

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

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

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

</ion-tabs>

API

Attr Type Details
delegate-handle
(optional)
 string

The handle used to identify these tabs with $ionicTabsDelegate.