ion-tabs
タブは、タブベースのナビゲーションを実装するためのトップレベルのナビゲーションコンポーネントです。 このコンポーネントは、個々の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
Interfaces
TabsCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。
interface TabsCustomEvent extends CustomEvent {
detail: { tab: string };
target: HTMLIonTabsElement;
}
プロパティ
No properties available for this component.
イベント
| Name | Description |
|---|---|
ionTabsDidChange | ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。 |
ionTabsWillChange | ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。 |
メソッド
getSelected
| Description | 現在選択されているタブを取得します。 |
| Signature | getSelected() => Promise<string ｜ undefined> |
getTab
| Description | タブの tab プロパティの値、または要素の参照によって特定のタブを取得します。 |
| Signature | getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined> |
select
| Description | タブの tab プロパティの値、または要素の参照によってタブを選択します。 |
| 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 |
|---|---|
| `` | slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。 |
bottom | コンテンツは画面下部に配置されます。 |
top | コンテンツは画面上部に配置されます。 |