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 tab has a separate navigation controller. 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.

Component

selector: ion-tab

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 (select) 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 preloadTabs="false">
  <ion-tab (select)="chat()"></ion-tab>
</ion-tabs>
export class Tabs {
  constructor(nav: NavController) {
    this.nav = nav;
  }

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

Input Properties

Attr Type Details
root Page

Set the root page for this tab.

rootParams object

Any nav-params to pass to the root page of this tab.

tabTitle string

The title of the tab button.

tabIcon string

The icon for the tab button.

tabBadge string

The badge for the tab button.

tabBadgeStyle string

The badge color for the tab button.

enabled boolean

If the tab is enabled or not. If the tab is not enabled then the tab button will still show, however, the button will appear grayed out and will not be clickable. Defaults to true.

show boolean

If the tab button is visible within the tabbar or not. Defaults to true.

Output Events

Attr Details
select

Method to call when the current tab is selected

Related

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

API

Native

General