ion-tabs

shadow

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

Ionic has guides on best practices for routing patterns with tabs. Check out the guides for Angular, React, and Vue for additional information.

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	ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。	false
ionTabsWillChange	ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。	false

Methods

getSelected

Description	現在選択されているタブを取得します。このメソッドは、バニラJavaScriptプロジェクトでのみ使用できます。Angular、React、Vueのタブの実装は、各フレームワークのルーターと結合しています。
Signature	getSelected() => Promise<string ｜ undefined>

getTab

Description	特定のタブを tab プロパティの値または要素参照で取得する。このメソッドは vanilla JavaScript プロジェクトでのみ利用可能です。Angular、React、Vue のタブの実装は、それぞれのフレームワークのルータと結合しています。
Signature	getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>

select

Description	タブを tab プロパティの値または要素参照で選択する。このメソッドはバニラJavaScriptプロジェクトでのみ利用可能です。Angular、React、Vue のタブの実装は、それぞれのフレームワークのルータと結合しています。
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	コンテンツは画面上部に配置されます。