Tabs

ion-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. Each individual ion-tab is a declarative component for a NavController

For more information on using nav controllers like Tab or Nav, take a look at the NavController API Docs.

Placement

The position of the tabs relative to the content varies based on the mode. The tabs are placed at the bottom of the screen for iOS and Android, and at the top for Windows by default. The position can be configured using the tabsPlacement attribute on the <ion-tabs> component, or in an app's config. See the Input Properties below for the available values of tabsPlacement.

Layout

The layout for all of the tabs can be defined using the tabsLayout 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 tabsLayout 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 tabsLayout.

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.

Usage

You can add a basic tabs template to a @Component 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:

@Component({
  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 #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. Here we're grabbing the tabs by using ViewChild.

export class TabsPage {

@ViewChild('myTabs') tabRef: Tabs;

ionViewDidEnter() {
  this.tabRef.select(2);
 }

}

You can also switch tabs from a child component by calling select() on the parent view using the NavController instance. For example, assuming you have a TabsPage component, you could call the following from any of the child components to switch to TabsRoot3:

switchTabs() {
  this.navCtrl.parent.select(2);
}

Instance Members

getByIndex(index)

getSelected()

previousTab(trimHistory)

Get the previously selected Tab which is currently not disabled or hidden.

select(tabOrIndex)

viewCtrl

Input Properties

Output Events

Sass Variables

Related

Tabs Component Docs, Tab API Docs, Config API Docs