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.
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.
- src/app/example.component.html
- src/app/home/home-page.component.ts
- src/app/home/home-page.component.html
- src/global.css
- src/app/home/home-page.module.ts
- src/app/library/library-page.component.ts
- src/app/library/library-page.component.html
- src/app/library/library-page.module.ts
- src/app/radio/radio-page.component.ts
- src/app/radio/radio-page.component.html
- src/app/radio/radio-page.module.ts
- src/app/search/search-page.component.ts
- src/app/search/search-page.component.html
- src/app/search/search-page.module.ts
- src/app/app.module.ts
- src/app/app.component.html
- src/app/app-routing.module.ts
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="play-circle"></ion-icon>
Listen Now
</ion-tab-button>
<ion-tab-button tab="radio">
<ion-icon name="radio"></ion-icon>
Radio
</ion-tab-button>
<ion-tab-button tab="library">
<ion-icon name="library"></ion-icon>
Library
</ion-tab-button>
<ion-tab-button tab="search">
<ion-icon name="search"></ion-icon>
Search
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
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 | Bubbles |
---|---|---|
ionTabsDidChange | Emitted when the navigation has finished transitioning to a new component. | false |
ionTabsWillChange | Emitted when the navigation is about to transition to a new component. | false |
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. |