Tabs

Improve this doc

Tabs make it easy to navigate between different pages or functional aspects of an app. The Tabs component, written as <ion-tabs>, is a container of individual Tab components.

Placement

The position of the tabs relative to the content varies based on the mode. By default, the tabs are placed at the bottom of the screen for ios mode, and at the top for the md and wp modes. You can configure the position using the tabbarPlacement property on the <ion-tabs> element, or in your app's config. See the Input Properties below for the available values of tabbarPlacement.

Layout

The layout for all of the tabs can be defined using the tabbarLayout property. If the individual tab has a title and icon, the icons will show on top of the title by default. All tabs can be changed by setting the value of tabbarLayout on the <ion-tabs> element, or in your app's config. For example, this is useful if you want to show tabs with a title only on Android, but show icons and a title for iOS. See the Input Properties below for the available values of tabbarLayout.

Selecting a Tab

There are different ways you can select a specific tab from the tabs component. You can use the selectedIndex property to set the index on the <ion-tabs> element, or you can call select() from the Tabs instance after creation. See usage below for more information.

Component

selector: ion-tabs

Usage

You can add a basic tabs template to a @Page using the following template:

<ion-tabs>
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

Where tab1Root, tab2Root, and tab3Root are each a page:

@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root = Page1;
  tab2Root = Page2;
  tab3Root = Page3;

  constructor() {

  }
}

By default, the first tab will be selected upon navigation to the Tabs page. We can change the selected tab by using selectedIndex on the <ion-tabs> element:

<ion-tabs selectedIndex="2">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

Since the index starts at 0, this will select the 3rd tab which has root set to tab3Root. If you wanted to change it dynamically from your class, you could use property binding.

Alternatively, you can grab the Tabs instance and call the select() method. This requires the <ion-tabs> element to have an id. For example, set the value of id to myTabs:

<ion-tabs id="myTabs">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

Then in your class you can grab the Tabs instance and call select(), passing the index of the tab as the argument. In the following code app is of type IonicApp:

constructor(app: IonicApp) {
  this.app = app;
}

onPageDidEnter() {
  let tabs = this.app.getComponent('myTabs');
  tabs.select(2);
}

Instance Members

select(index)

getByIndex(index)

getSelected()

Input Properties

Output Events

Related

Tabs Component Docs, Tab API Docs, Config API Docs