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 | ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。 |
ionTabsWillChange | ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。 |
Methods
getSelected
| Description | 現在選択されているタブを取得します。 |
| Signature | getSelected() => Promise<string ｜ undefined> |
getTab
| Description | タブの tab プロパティの値、または要素の参照によって特定のタブを取得します。 |
| Signature | getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined> |
select
| Description | タブの tab プロパティの値、または要素の参照によってタブを選択します。 |
| 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 |
|---|---|
| `` | slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。 |
bottom | コンテンツは画面下部に配置されます。 |
top | コンテンツは画面上部に配置されます。 |