Tab

`ion-tab`

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();
  }
}

Attr	Type	Details
enabled	`boolean`	If true, enable the tab. If false, the user cannot interact with this element. Default: `true`.
root	`Page`	Set the root page for this tab.
rootParams	`object`	Any nav-params to pass to the root page of this tab.
show	`boolean`	If true, the tab button is visible within the tabbar. Default: `true`.
tabBadge	`string`	The badge for the tab button.
tabBadgeStyle	`string`	The badge color for the tab button.
tabIcon	`string`	The icon for the tab button.
tabTitle	`string`	The title of the tab button.
tabUrlPath	`string`	The URL path name to represent this tab within the URL.
tabsHideOnSubPages	`boolean`	If true, hide the tabs on child pages.

Output Events

Attr	Details
ionSelect	Emitted when the current tab is selected.

Sass Variables

iOS Material Design Windows Platform

Property	Default	Description
`$tabs-ios-border`	`$hairlines-width solid $tabs-ios-border-color`	Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
`$tabs-ios-tab-padding-top`	`0`	Padding top on the tab button
`$tabs-ios-tab-padding-end`	`2px`	Padding end on the tab button
`$tabs-ios-tab-padding-bottom`	`$tabs-ios-tab-padding-top`	Padding bottom on the tab button
`$tabs-ios-tab-padding-start`	`$tabs-ios-tab-padding-end`	Padding start on the tab button
`$tabs-ios-tab-max-width`	`240px`	Max width of the tab button
`$tabs-ios-tab-min-height`	`49px`	Minimum height of the tab button
`$tabs-ios-tab-text-color`	`$tabs-ios-tab-color-inactive`	Text color of the inactive tab button
`$tabs-ios-tab-text-color-active`	`$tabs-ios-tab-color-active`	Text color of the active tab button
`$tabs-ios-tab-icon-color`	`$tabs-ios-tab-color-inactive`	Icon color of the inactive tab button
`$tabs-ios-tab-icon-color-active`	`$tabs-ios-tab-color-active`	Icon color of the active tab button
`$tabs-ios-tab-font-size`	`10px`	Font size of the tab button text
`$tabs-ios-tab-icon-size`	`30px`	Size of the tab button icon

Property	Default	Description
`$tabs-md-tab-padding-top`	`0`	Padding top on the tab button
`$tabs-md-tab-padding-end`	`$tabs-md-tab-padding-top`	Padding end on the tab button
`$tabs-md-tab-padding-bottom`	`$tabs-md-tab-padding-top`	Padding bottom on the tab button
`$tabs-md-tab-padding-start`	`$tabs-md-tab-padding-end`	Padding start on the tab button
`$tabs-md-tab-min-height`	`5.6rem`	Minimum height of the tab button
`$tabs-md-tab-font-size`	`1.2rem`	Font size of the inactive tab button text
`$tabs-md-tab-font-weight`	`normal`	Font weight of the tab button text
`$tabs-md-tab-opacity`	`.7`	Opacity of the inactive tab button
`$tabs-md-tab-text-color`	`rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity)`	Text color of the inactive tab button
`$tabs-md-tab-text-color-active`	`$tabs-md-tab-color-active`	Text color of the active tab button
`$tabs-md-tab-icon-color`	`rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity)`	Icon color of the inactive tab button
`$tabs-md-tab-icon-color-active`	`$tabs-md-tab-color-active`	Icon color of the active tab button
`$tabs-md-tab-padding-active-top`	`0`	Padding top of the active tab button
`$tabs-md-tab-padding-active-end`	`$tabs-md-tab-padding-active-top`	Padding end of the active tab button
`$tabs-md-tab-padding-active-bottom`	`$tabs-md-tab-padding-active-top`	Padding bottom of the active tab button
`$tabs-md-tab-padding-active-start`	`$tabs-md-tab-padding-active-end`	Padding start of the active tab button
`$tabs-md-tab-font-size-active`	`1.4rem`	Font size of the active tab button text
`$tabs-md-tab-text-margin-top`	`0`	Margin top on the tab button text
`$tabs-md-tab-text-margin-end`	`$tabs-md-tab-text-margin-top`	Margin end on the tab button text
`$tabs-md-tab-text-margin-bottom`	`$tabs-md-tab-text-margin-top`	Margin bottom on the tab button text
`$tabs-md-tab-text-margin-start`	`$tabs-md-tab-text-margin-end`	Margin start on the tab button text
`$tabs-md-tab-text-capitalization`	`none`	Capitalization of the tab button text
`$tabs-md-tab-text-transform-origin-x`	`50%`	Transform origin x for the tab button text
`$tabs-md-tab-text-transform-origin-y`	`80%`	Transform origin y for the tab button text
`$tabs-md-tab-text-transform-active`	`scale3d($tabs-md-tab-font-size-active / $tabs-md-tab-font-size, $tabs-md-tab-font-size-active / $tabs-md-tab-font-size, 1)`	Transform for the active tab button text
`$tabs-md-tab-text-transition`	`transform .3s ease-in-out`	Text transition for the tab button text
`$tabs-md-tab-icon-transform-x-active`	`0`	Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-only
`$tabs-md-tab-icon-transform-y-active`	`-2px`	Transform y for the active tab button icon when the layout is icon-top, icon-only, or title-only
`$tabs-md-tab-icon-transform-z-active`	`0`	Transform z for the active tab button icon when the layout is icon-top, icon-only, or title-only
`$tabs-md-tab-icon-right-transform-x-active`	`2px`	Transform x for the active tab button icon when the layout is icon-right
`$tabs-md-tab-icon-right-transform-y-active`	`0`	Transform y for the active tab button icon when the layout is icon-right
`$tabs-md-tab-icon-right-transform-z-active`	`0`	Transform z for the active tab button icon when the layout is icon-right
`$tabs-md-tab-icon-bottom-transform-x-active`	`0`	Transform x for the active tab button icon when the layout is icon-bottom
`$tabs-md-tab-icon-bottom-transform-y-active`	`2px`	Transform y for the active tab button icon when the layout is icon-bottom
`$tabs-md-tab-icon-bottom-transform-z-active`	`0`	Transform z for the active tab button icon when the layout is icon-bottom
`$tabs-md-tab-icon-left-transform-x-active`	`-2px`	Transform x for the active tab button icon when the layout is icon-left
`$tabs-md-tab-icon-left-transform-y-active`	`0`	Transform y for the active tab button icon when the layout is icon-left
`$tabs-md-tab-icon-left-transform-z-active`	`0`	Transform z for the active tab button icon when the layout is icon-left
`$tabs-md-tab-icon-transform-origin-x`	`50%`	Transform origin x for the tab button text
`$tabs-md-tab-icon-transform-origin-y`	`150%`	Transform origin y for the tab button text
`$tabs-md-tab-icon-transition`	`transform .3s ease-in-out`	Text transition for the tab button icon
`$tabs-md-tab-icon-size`	`2.4rem`	Size of the tab button icon

Property	Default	Description
`$tabs-wp-tab-padding-top`	`12px`	Padding top on the tab button
`$tabs-wp-tab-padding-end`	`10px`	Padding end on the tab button
`$tabs-wp-tab-padding-bottom`	`5px`	Padding bottom on the tab button
`$tabs-wp-tab-padding-start`	`10px`	Padding start on the tab button
`$tabs-wp-tab-min-height`	`4.8rem`	Minimum height of the tab button
`$tabs-wp-tab-font-size`	`1.2rem`	Font size of the tab button text
`$tabs-wp-tab-font-weight`	`normal`	Font weight of the tab button text
`$tabs-wp-tab-opacity`	`.7`	Opacity of the inactive tab button
`$tabs-wp-tab-color`	`rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity)`	Text color of the inactive tab button
`$tabs-wp-tab-color-active`	`$tabs-wp-tab-color-active`	Text color of the active tab button
`$tabs-wp-tab-icon-color`	`rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity)`	Icon color of the inactive tab button
`$tabs-wp-tab-icon-color-active`	`$tabs-wp-tab-color-active`	Icon color of the active tab button
`$tabs-wp-tab-border`	`2px solid $tabs-wp-border-color`	Border on the inactive tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
`$tabs-wp-tab-border-color-active`	`$tabs-wp-tab-color-active`	Border color on the active tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
`$tabs-wp-tab-background-activated`	`rgba(0, 0, 0, .1)`	Background of the tab button when pressed
`$tabs-wp-tab-icon-size`	`2.4rem`	Size of the tab button icon

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

Tab

`ion-tab`

Usage

Instance Members

`goToRoot()`

Input Properties

Output Events

Sass Variables

Related

API

Native

General