メインコンテンツまでスキップ
Version: v6

ion-tabs

shadow

コンテンツ

Tabsは、タブベースのナビゲーションを実現するためのトップレベル・ナビゲーション・コンポーネントです。 このコンポーネントは、個々の [Tab] (tab.md) コンポーネントのコンテナです。

ion-tabs コンポーネントはスタイルを持たず、ナビゲーションを処理するためのルータアウトレットとして動作します。また、UI フィードバックやタブを切り替えるための機構は提供しない。タブを切り替えるには、ion-tabs の直接の子として ion-tab-bar を用意しなければなりません。

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

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

Interfaces

TabsCustomEvent

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

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

使い方

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>

<ion-tab-button tab="speakers">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

Router integration

When used with Angular's router the tab property of the ion-tab-button should be a reference to the route path.

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
import { Routes } from '@angular/router';
import { TabsPage } from './tabs-page';

const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'schedule',
children: [
{
path: '',
loadChildren: '../schedule/schedule.module#ScheduleModule'
}
]
},
{
path: '',
redirectTo: '/app/tabs/schedule',
pathMatch: 'full'
}
]
}
];

プロパティ

No properties available for this component.

イベント

NameDescription
ionTabsDidChangeEmitted when the navigation has finished transitioning to a new component.
ionTabsWillChangeEmitted when the navigation is about to transition to a new component.

メソッド

getSelected

DescriptionGet the currently selected tab.
SignaturegetSelected() => Promise<string | undefined>

getTab

DescriptionGet a specific tab by the value of its tab property or an element reference.
SignaturegetTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>

select

DescriptionSelect a tab by the value of its tab property or an element reference.
Signatureselect(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

NameDescription
``Content is placed between the named slots if provided without a slot.
bottomContent is placed at the bottom of the screen.
topContent is placed at the top of the screen.
View Source