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.
Framework Support
Using ion-tabs
within Angular, React or Vue requires the use of the ion-router-outlet
or ion-nav
components.
Usage with Router
Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation.
Best Practices
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;
}
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. |