Skip to main content
Version: v7 (beta)

ion-tabs

shadow

Contents

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.

Interfaces

TabsCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface TabsCustomEvent extends CustomEvent {
detail: { tab: string };
target: HTMLIonTabsElement;
}

Usage

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar" aria-hidden="true"></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" aria-hidden="true"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-button tab="map">
<ion-icon name="map" aria-hidden="true"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-button tab="about">
<ion-icon name="information-circle" aria-hidden="true"></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" aria-hidden="true"></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'
}
]
}
];

Properties

No properties available for this component.

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>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

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