Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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>pop
export class Tabs {
  constructor(public modalCtrl: ModalController) {

  }

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

Instance Members

goToRoot()

Input Properties

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

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-font-weight 500

Font weight 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

Related

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

API

Native

General