Skip to main content
Version: v7

ion-tabs

shadow

タブは、タブベースのナビゲーションを実装するためのトップレベルのナビゲーションコンポーネントです。 このコンポーネントは、個々のTabコンポーネントのコンテナである。

ion-tabs コンポーネントはスタイルを持たず、ナビゲーションを処理するためのルータアウトレットとして動作します。また、UI フィードバックやタブを切り替えるための機構は提供しない。タブを切り替えるには、ion-tabs の直接の子として ion-tab-bar を用意しなければなりません。

ion-tabsion-tab-bar はどちらもスタンドアロンな要素として利用することができます。これらは互いに依存せずに動作しますが、通常は、ネイティブアプリのように動作するタブベースのナビゲーションを実装するために一緒に使用します。

ion-tab-bar は、ion-tabs コンポーネントの適切な場所に投影するために、スロットを定義する必要があります。

Framework Support

Angular、React、Vueで ion-tabs を使用するには、 ion-router-outlet または ion-nav コンポーネントを使用する必要があります。

ルーターとの併用

タブはIonicルーターと一緒に使うことで、タブベースのナビゲーションを実装することができます。タブバーとアクティブなタブは、urlに基づいて自動的に解決されます。これはタブナビゲーションで最も一般的なパターンです。

Best Practices

Ionicでは、タブを使ったルーティングパターンのベストプラクティスに関するガイドを用意しています。 Check out the guides for Angular, React, and Vue for additional information.

Interfaces

TabsCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface TabsCustomEvent extends CustomEvent {
detail: { tab: string };
target: HTMLIonTabsElement;
}

プロパティ

No properties available for this component.

イベント

NameDescription
ionTabsDidChangeナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。
ionTabsWillChangeナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。

メソッド

getSelected

Description現在選択されているタブを取得します。
SignaturegetSelected() => Promise<string | undefined>

getTab

Descriptionタブの tab プロパティの値、または要素の参照によって特定のタブを取得します。
SignaturegetTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>

select

Descriptionタブの tab プロパティの値、または要素の参照によってタブを選択します。
Signatureselect(tab: string | HTMLIonTabElement) => Promise<boolean>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

NameDescription
``slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。
bottomコンテンツは画面下部に配置されます。
topコンテンツは画面上部に配置されます。