TabView

This is an overview of the most common usage of TabView. For more information about the available properties, methods, or events, head over to the complete API documentation for TabView.

<TabView>は、タブでコンテンツをにグループ化し、それらのタブを移動できるようにするためのナビゲーションコンポーネントです。


<TabView :selectedIndex="selectedIndex">
  <TabViewItem title="Tab 1">
    <Label text="Content for Tab 1" />
  </TabViewItem>
  <TabViewItem title="Tab 2">
    <Label text="Content for Tab 2" />
  </TabViewItem>
</TabView>

注意: 現在TabViewItemは一つの子要素を想定しています。ほとんどの場合、レイアウトで内容をラップすることになるでしょう。

タブにアイコンを追加する

<TabView :selectedIndex="selectedIndex" iosIconRenderingMode="alwaysOriginal">
  <TabViewItem title="Tab 1" iconSource="~/images/icon.png">
    <Label text="Content for Tab 1" />
  </TabViewItem>
  <TabViewItem title="Tab 2" iconSource="~/images/icon.png">
    <Label text="Content for Tab 2" />
  </TabViewItem>
</TabView>

注意: アイコンフォントの代わりに画像を使用することもできます。アイコンのサイズを調整するための詳細については、Working with image from resource foldersを見てください。

Props

名前説明
selectedIndexNumber現在選択されているタブを取得・設定します。デフォルトの値は0です。
tabTextColorColor(スタイルのプロパティ) タブのタイトルのテキストカラーを取得・設定します。
tabBackgroundColorColor(スタイルのプロパティ) タブの背景のカラーを取得・設定します。
selectedTabTextColorColor(スタイルのプロパティ) 選択されているタブのテキストカラーを取得・設定します。
androidTabsPositionStringAndroidでのタブの位置を設定します。
有効な値: topbottom

Events

名前説明
selectedIndexChangeタップされた<TabViewItem>のインデクスとその中のvalueプロパティを含むイベントオブジェクトを送信します。

Native component

AndroidiOS
android.support.v4.view.ViewPagerUITabBarController
Contributors