Tab

ion-tab

Improve this doc

The Tab component, written <ion-tab>, is styled based on the mode and should be used in conjunction with the Tabs component.

Each ion-tab is a declarative component for a NavController. Basically, each tab is a NavController. For more information on using navigation controllers take a look at the NavController API Docs.

See the Tabs API Docs for more details on configuring Tabs.

Usage

To add a basic tab, you can use the following markup where the root property is the page you want to load for that tab, tabTitle is the optional text to display on the tab, and tabIcon is the optional icon.

<ion-tabs>
 <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>

Then, in your class you can set chatRoot to an imported class:

import { ChatPage } from '../chat/chat';

export class Tabs {
  // here we'll set the property of chatRoot to
  // the imported class of ChatPage
  chatRoot = ChatPage;

  constructor() {

  }
}

You can also pass some parameters to the root page of the tab through rootParams. Below we pass chatParams to the Chat tab:

<ion-tabs>
 <ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>

export class Tabs {
  chatRoot = ChatPage;

  // set some user information on chatParams
  chatParams = {
    user1: "admin",
    user2: "ionic"
  };

  constructor() {

  }
}

And in ChatPage you can get the data from NavParams:

export class ChatPage {
  constructor(navParams: NavParams) {
    console.log("Passed params", navParams.data);
  }
}

Sometimes you may want to call a method instead of navigating to a new page. You can use the (ionSelect) event to call a method on your class when the tab is selected. Below is an example of presenting a modal from one of the tabs.

<ion-tabs>
  <ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>

export class Tabs {
  constructor(public modalCtrl: ModalController) {

  }

  chat() {
    let modal = this.modalCtrl.create(ChatPage);
    modal.present();
  }
}

Input Properties

Output Events

Sass Variables

Related

Tabs Component Docs, Tabs API Docs, Nav API Docs, NavController API Docs