Skip to main content

ion-tabs

View Source

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.