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.

イベント

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

メソッド

getSelected

Description	Get 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.
Signature	getSelected() => Promise<string ｜ undefined>

getTab

Description	Get 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.
Signature	getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>

select

Description	Select 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.
Signature	select(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

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.