タブ

このTabsコンポーネントは、iOSとAndroidの両方のプラットフォームに共通のUIを提供しながら、 異なるビュー間を移動する簡単な方法を提供します。 Tabsに適した推奨シナリオは、中間レベルのナビゲーションです。 下部ナビゲーションの詳細と詳細については、マテリアルデザインガイドラインを参照してください。

Tabsコンポーネントの要点

• セマンティック： 中間レベルのナビゲーション
• 使用法： 共通の機能を持つ無制限のタブ
• タブ遷移： 相互の相対的な位置を示すスライド遷移
• ジェスチャー： スワイプジェスチャー
• プリロード： 少なくとも1サイドに（スワイプジェスチャーのため）

使用法

Tabsコンポーネントは、2つのサブコンポーネントが含まれています。

• 下部バーとして定義され描画されるTabStripと、それの持つTabStripItemコンポーネント。
• タブ（TabStripItemコンポーネント）の数と等しい、複数のTabContentItemコンポーネント。 それぞれのTabContentItemがタブコンテンツのコンテナとして機能します。

<Tabs selectedIndex="1">

	<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
	<TabStrip>
		<TabStripItem>
			<Label text="Home"></Label>
			<Image src="font://&#xf015;" class="fas"></Image>
		</TabStripItem>
		<TabStripItem class="special">
			<Label text="Account"></Label>
			<Image src="font://&#xf007;" class="fas"></Image>
		</TabStripItem>
		<TabStripItem class="special">
			<Label text="Search"></Label>
			<Image src="font://&#xf00e;" class="fas"></Image>
		</TabStripItem>
	</TabStrip>

	<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
	<TabContentItem>
		<GridLayout>
			<Label text="Home Page" class="h2 text-center"></Label>
		</GridLayout>
	</TabContentItem>
	<TabContentItem>
		<GridLayout>
			<Label text="Account Page" class="h2 text-center"></Label>
		</GridLayout>
	</TabContentItem>
	<TabContentItem>
		<GridLayout>
			<Label text="Search Page" class="h2 text-center"></Label>
		</GridLayout>
	</TabContentItem>

</Tabs>

ダイナミックな創造

Tabsコンポーネントをプログラムで作成するには、 それぞれのTabStripItemを作成するために特別なプロパティを使用する必要があります。 これらのプロパティはtitle、iconSource、 iconClass（対応するLabelとImageを作成するために使用されます）です。

	let tabs = new Tabs();
	let tabStrip = new TabStrip();

	let tabStripItem1 = new TabStripItem();
	tabStripItem1.title = "Tab 1";
	tabStripItem1.iconSource = "font://" + String.fromCharCode(charCode1);
	tabStripItem1.iconClass = "far"; // e.g., FontAвесоме

	let tabStripItem2 = new TabStripItem();
	tabStripItem2.title = "Tab 2";
	tabStripItem2.iconSource = "font://" + String.fromCharCode(charCode2);
	tabStripItem2.iconClass = "far"; // e.g., FontAвесоме

	let tabStripItems = [tabStripItem1, tabStripItem2];
	tabStrip.items = tabStripItems;

	let contentItems = [conterntItem1, contentItem2]; // where contentItem1 and 2 are the layouts/frames that holds the actual content

	tabs.tabStrip = tabStrip;
	tabs.items = contentItems;

	let stack = new StackLayout(); // the ""simple rule
	stack.addChild(tabs)
	somePage.content = stack; // base example for adding the newly created Tabs to the current page

デモソース

スタイリング

メインのスタイルオプションには、TabStripコンポーネントに設定する必要がある3つの特定のプロパティが導入されています。

• selectedItemnColor： 選択したタブストリップ項目のテキストの色を設定します。アイコンがアイコンフォント（font://）の場合、タブストリップアイコンの色も設定します。
• unSelectedItemColor： 選択されていないタブストリップアイテムのテキストの色を設定します。アイコンがアイコンフォント（font://）の場合、タブストリップアイコンの色も設定します。
• highlightColor： 選択したタブストリップ項目の下線の色を設定します。

これらのプロパティは、CSSを介してインラインで動的に設定できます。

TabStrip {
    selected-item-color: blueviolet;
    un-selected-item-color: brown;
    highlight-color: gold;
}

TabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
TabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
TabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}

デモソース

プロパティ

Tabsのプロパティ

TabStripプロパティ

TabStripItemプロパティ

イベント

Tabsイベント

TabStripイベント

TabStripItemイベント

APIリファレンス

ネイティブコンポーネント