ion-tabs

シャドウ

タブは、タブベースのナビゲーションを実装するためのトップレベルナビゲーションコンポーネントです。このコンポーネントは、個々の<a href="/docs/api/tab">Tab</a>コンポーネントのコンテナです。

ion-tabsコンポーネントにはスタイルがなく、ナビゲーションを処理するためのラウターアウトレットとして機能します。タブを切り替えるためのUIフィードバックやメカニズムは提供していません。そのためには、ion-tabsの直接の子要素としてion-tab-barを提供する必要があります。

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

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

基本的な使い方

タブを使用すると、URLを変更することなく異なるコンテンツを表示できます。これは、タブがナビゲーションではなく、異なるコンテンツを表示するために使用される場合に便利です。

ルータとの併用

タブは、Ionicルータと組み合わせてタブベースのナビゲーションを実装するために使用できます。タブバーとアクティブなタブは、URLに基づいて自動的に解決されます。これは、タブナビゲーションの最も一般的なパターンです。

省略(アイコンのSVG。日本語に翻訳する必要がないと思われる)ベストプラクティス

Ionicには、タブを使用したルーティングパターンのベストプラクティスに関するガイドがあります。詳細については、Angular、React、Vueのガイドをご覧ください。

インターフェース

TabsCustomEvent

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

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

プロパティ

このコンポーネントで使用可能なプロパティはありません。

イベント

名前	説明	バブル
ionTabsDidChange	ナビゲーションが新しいコンポーネントへの遷移を完了したときに発行されます。	false
ionTabsWillChange	ナビゲーションが新しいコンポーネントに遷移しようとしているときに発行されます。	false

メソッド

getSelected

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

getTab

説明	tabプロパティの値または要素参照によって特定のタブを取得します。このメソッドは、バニラJavaScriptプロジェクトでのみ使用できます。Angular、React、Vueのタブ実装は、各フレームワークのルータに結合されています。
シグネチャ	getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>

select

説明	tabプロパティの値または要素参照によってタブを選択します。このメソッドは、バニラJavaScriptプロジェクトでのみ使用できます。Angular、React、Vueのタブ実装は、各フレームワークのルータに結合されています。
シグネチャ	select(tab: string ｜ HTMLIonTabElement) => Promise<boolean>

CSSシャドウパーツ

このコンポーネントで使用可能なCSSシャドウパーツはありません。

CSSカスタムプロパティ

このコンポーネントで使用可能なCSSカスタムプロパティはありません。

スロット

名前	説明
``	スロットが指定されていない場合、コンテンツは名前付きスロットの間に配置されます。
bottom	コンテンツは画面の下部に配置されます。
top	コンテンツは画面の上部に配置されます。