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
- Angular
- Javascript
- React
- Stencil
- Vue
<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',
},
],
},
];
<ion-tabs>
<ion-tab tab="tab-schedule">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-speaker">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-map" component="page-map">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-about" component="page-about">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="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="tab-speaker">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Activating Tabs
Each ion-tab-button
will activate one of the tabs when pressed. In order to link the ion-tab-button
to the ion-tab
container, a matching tab
property should be set on each component.
<ion-tab tab="settings"> ... </ion-tab>
<ion-tab-button tab="settings"> ... </ion-tab-button>
The ion-tab-button
and ion-tab
above are linked by the common tab
property.
The tab
property identifies each tab, and it has to be unique within the ion-tabs
. It's important to always set the tab
property on the ion-tab
and ion-tab-button
, even if one component is not used.
Router integration
When used with Ionic's router (ion-router
) the tab
property of the ion-tab
matches the component
property of an ion-route
.
The following route within the scope of an ion-tabs
outlet:
<ion-route url="/settings-page" component="settings"></ion-route>
will match the following tab:
<ion-tab tab="settings" component="settings-component"></ion-tab>
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';
export const TabsExample: React.FC = () => (
<IonTabs>
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon icon={calendar} />
<IonLabel>Schedule</IonLabel>
<IonBadge>6</IonBadge>
</IonTabButton>
<IonTabButton tab="speakers">
<IonIcon icon={personCircle} />
<IonLabel>Speakers</IonLabel>
</IonTabButton>
<IonTabButton tab="map">
<IonIcon icon={map} />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabButton tab="about">
<IonIcon icon={informationCircle} />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'tabs-example',
styleUrl: 'tabs-example.css',
})
export class TabsExample {
render() {
return [
<ion-tabs>
<ion-tab tab="tab-schedule">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-speaker">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-map" component="page-map">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-about" component="page-about">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="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="tab-speaker">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>,
];
}
}
Activating Tabs
Each ion-tab-button
will activate one of the tabs when pressed. In order to link the ion-tab-button
to the ion-tab
container, a matching tab
property should be set on each component.
<ion-tab tab="settings">
...
</ion-tab>
<ion-tab-button tab="settings">
...
</ion-tab-button>
The ion-tab-button
and ion-tab
above are linked by the common tab
property.
The tab
property identifies each tab, and it has to be unique within the ion-tabs
. It's important to always set the tab
property on the ion-tab
and ion-tab-button
, even if one component is not used.
Router integration
When used with Ionic's router (ion-router
) the tab
property of the ion-tab
matches the component
property of an ion-route
.
The following route within the scope of an ion-tabs
outlet:
<ion-route url="/settings-page" component="settings"></ion-route>
will match the following tab:
<ion-tab tab="settings" component="settings-component"></ion-tab>
Tabs.vue
<template>
<ion-page>
<ion-tabs @ionTabsWillChange="beforeTabChange" @ionTabsDidChange="afterTabChange">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/tabs/schedule">
<ion-icon :icon="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/tabs/speakers">
<ion-icon :icon="personCircle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
import { calendar, personCircle } from 'ionicons/icons';
export default defineComponent({
components: {
IonIcon,
IonLabel,
IonPage,
IonTabBar,
IonTabButton,
IonTabs,
},
setup() {
const beforeTabChange = () => {
// do something before tab change
};
const afterTabChange = () => {
// do something after tab change
};
return {
calendar,
personCircle,
beforeTabChange,
afterTabChange,
};
},
});
</script>
Schedule.vue
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Schedule</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">Schedule Tab</ion-content>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
export default defineComponent({
components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar },
});
</script>
Speakers.vue
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Speakers</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">Speakers Tab</ion-content>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
export default defineComponent({
components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar },
});
</script>
Properties
No properties available for this component.
Events
Name | Description |
---|---|
ionTabsDidChange | Emitted when the navigation has finished transitioning to a new component. |
ionTabsWillChange | Emitted when the navigation is about to transition to a new component. |
Methods
getSelected
Description | Get the currently selected tab. |
Signature | getSelected() => Promise<string | undefined> |
getTab
Description | Get a specific tab by the value of its tab property or an element reference. |
Signature | getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined> |
select
Description | Select a tab by the value of its tab property or an element reference. |
Signature | select(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
Name | Description |
---|---|
`` | Content is placed between the named slots if provided without a slot. |
bottom | Content is placed at the bottom of the screen. |
top | Content is placed at the top of the screen. |