Skip to main content

ion-tabs

Tabs are a top level navigation component to implement a tab-based navigation. The component is a container of individual Tab components.

The ion-tabs component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an ion-tab-bar should be provided as a direct child of ion-tabs.

Both ion-tabs and ion-tab-bar can be used as standalone elements. They don’t depend on each other to work, but they are usually used together in order to implement a tab-based navigation that behaves like a native app.

The ion-tab-bar needs a slot defined in order to be projected to the right place in an ion-tabs component.

Usage#

<ion-tabs>  <ion-tab-bar slot="bottom">    <ion-tab-button tab="schedule">      <ion-icon name="calendar"></ion-icon>      <ion-label>Schedule</ion-label>      <ion-badge>6</ion-badge>    </ion-tab-button>
    <ion-tab-button tab="speakers">      <ion-icon name="person-circle"></ion-icon>      <ion-label>Speakers</ion-label>    </ion-tab-button>
    <ion-tab-button tab="map">      <ion-icon name="map"></ion-icon>      <ion-label>Map</ion-label>    </ion-tab-button>
    <ion-tab-button tab="about">      <ion-icon name="information-circle"></ion-icon>      <ion-label>About</ion-label>    </ion-tab-button>  </ion-tab-bar></ion-tabs>

Router integration#

When used with Angular's router the tab property of the ion-tab-button should be a reference to the route path.

<ion-tabs>  <ion-tab-bar slot="bottom">    <ion-tab-button tab="schedule">      <ion-icon name="calendar"></ion-icon>      <ion-label>Schedule</ion-label>    </ion-tab-button>  </ion-tab-bar></ion-tabs>
import { Routes } from '@angular/router';import { TabsPage } from './tabs-page';
const routes: Routes = [  {    path: 'tabs',    component: TabsPage,    children: [      {        path: 'schedule',        children: [          {            path: '',            loadChildren: '../schedule/schedule.module#ScheduleModule',          },        ],      },      {        path: '',        redirectTo: '/app/tabs/schedule',        pathMatch: 'full',      },    ],  },];

Events#

NameDescription
ionTabsDidChangeEmitted when the navigation has finished transitioning to a new component.
ionTabsWillChangeEmitted when the navigation is about to transition to a new component.

Methods#

getSelected#

DescriptionGet the currently selected tab.
SignaturegetSelected() => Promise<string \| undefined>

getTab#

DescriptionGet a specific tab by the value of its tab property or an element reference.
SignaturegetTab(tab: string \| HTMLIonTabElement) => Promise<HTMLIonTabElement \| undefined>

select#

DescriptionSelect a tab by the value of its tab property or an element reference.
Signatureselect(tab: string \| HTMLIonTabElement) => Promise<boolean>

Slots#

NameDescription
``Content is placed between the named slots if provided without a slot.
bottomContent is placed at the bottom of the screen.
topContent is placed at the top of the screen.
View Source