ion-tabs
Tabs are a top level navigation component to implement a tab-based navigation. The component is a container of individual Tab components.
ion-tabs コンポーネントはスタイルを持たず、ナビゲーションを処理するためのルータアウトレットとして動作します。また、UI フィードバックやタブを切り替えるための機構は提供しない。タブを切り替えるには、ion-tabs の直接の子として ion-tab-bar を用意しなければなりません。
ion-tabs と ion-tab-bar はどちらもスタンドアロンな要素として利用することができます。これらは互いに依存せずに動作しますが、通常は、ネイティブアプリのように動作するタブベースのナビゲーションを実装するために一緒に使用します。
ion-tab-bar は、ion-tabs コンポーネントの適切な場所に投影するために、スロットを定義する必要があります。
Framework Support
Using ion-tabs within Angular, React or Vue requires the use of the ion-router-outlet or ion-nav components.
Usage with Router
Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation.
Best Practices
Interfaces
TabsCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。
interface TabsCustomEvent extends CustomEvent {
detail: { tab: string };
target: HTMLIonTabsElement;
}
Properties
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. |