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 | Emitted when the navigation has finished transitioning to a new component. |
ionTabsWillChange | Emitted when the navigation is about to transition to a new component. |
メソッド
getSelected
| Description | Get the currently selected tab. |
| Signature | getSelected() => Promise<string ｜ undefined> |
getTab
| Description | Get a specific tab by the value of its tab property or an element reference. |
| Signature | getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined> |
select
| Description | Select a tab by the value of its tab property or an element reference. |
| 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. |