Skip to main content
Version: v7

ion-tabs

shadow

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

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

ion-tabs と ion-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​

DescriptionGet the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
SignaturegetSelected() => Promise<string ｜ undefined>

getTab​

DescriptionGet a specific tab by the value of its tab property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
SignaturegetTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>

select​

DescriptionSelect a tab by the value of its tab property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
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コンテンツは画面上部に配置されます。

Contents

Edit this page