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

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)

Param Type Details
index number

Index of the tab you want to get

Returns: Tab

Returns the tab who's index matches the one passed

getSecondaryIdentifier()

getSelected()

Returns: Tab

Returns the currently selected tab

getType()

goToRoot()

previousTab(trimHistory)

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

Param Type Details
trimHistory boolean

If the selection history should be trimmed up to the previous tab selection or not.

Returns: Tab

select(tabOrIndex)

Param Type Details
tabOrIndex number|Tab

Index, or the Tab instance, of the tab to select.

viewCtrl

Input Properties

Attr Type Details
name string

A unique name for the tabs

selectedIndex number

The default selected tab index when first loaded. If a selected index isn't provided then it will use 0, the first tab.

tabsHighlight boolean

If true, show the tab highlight bar under the selected tab.

tabsLayout string

Set the tabbar layout: icon-top, icon-start, icon-end, icon-bottom, icon-hide, title-hide.

tabsPlacement string

Set position of the tabbar: top, bottom.

Output Events

Attr Details
ionChange

Emitted when the tab changes.

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-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, Tab API Docs, Config API Docs

API

Native

General