ボトムナビゲーション

このBottomNavigationコンポーネントは、iOSとAndroidプラットフォームの両方に共通のUIを提供しながら、さまざまなビュー間を移動する簡単な方法を提供します。 推奨されるシナリオは、それぞれが個別の機能を持つ3〜5個のタブを備えた高レベルのナビゲーションです。 ボトムナビゲーションの追加情報と詳細については、マテリアルデザインガイドラインを参照してください。

BottomNavigationコンポーネントの特徴：

コンポーネントの主な目的：

• 高レベルのナビゲーションに使用されます。
• 3〜5個の異なるオプション（画面）があるUX構造に適しています。
• スタイリングの制御の強化（TabVIewと比較して）。

制限事項

• ナビゲーション遷移はありません。
• ナビゲーションジェスチャーはありません（たとえば、スワイプでの移動）。
• コンテンツのプリロードはありません。

使用法

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

• 下部バーを定義しレンダリングするTabStripと、そのTabStripItemコンポーネント。
• 合計数がタブ（TabStripItemコンポーネント）の数と等しくなければならない複数のTabContentItemコンポーネント。 各々のTabContentItemがタブコンテンツのコンテナとして機能します。

<BottomNavigation 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>

		<!--
			The below two conventions (shorthand vs exteded syntax) are identical in UI outcome but the second one will provide you with greater control over your TabStripItem UI.
			When using the first shorthand syntax then your Icon Font CSS class should be set on the BottomNavigation element.
		 -->
		<!-- <TabStripItem title="Search" iconSource="font://&#xf00e;"></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>

</BottomNavigation>

デモソース

スタイリング

<!-- BottomNavigation supports the CSS properties `background-color` and `color` -->
	<BottomNavigation selectedIndex="1" class="bottom-nav">

		<!-- TabStripItem supports the CSS pseudo selector :active (see theming-page.css) -->
		<TabStrip>
			<TabStripItem class="tabstripitem">
				<Label text="Home"></Label>
				<Image src="font://&#xf015;" class="fas t-36"></Image>
			</TabStripItem>
			<TabStripItem class="tabstripitem">
				<Label text="Account"></Label>
				<Image src="font://&#xf007;" class="fas t-36"></Image>
			</TabStripItem>
			<TabStripItem class="tabstripitem">
				<Label text="Search"></Label>
				<Image src="font://&#xf00e;" class="fas t-36"></Image>
			</TabStripItem>
		</TabStrip>

		<TabContentItem class="first-tabcontent">
			<GridLayout>
				<Label text="Home Page" horizontalAlignment="center" verticalAlignment="middle"/>
			</GridLayout>
		</TabContentItem>
		<TabContentItem class="second-tabcontent">
			<GridLayout>
				<Label text="Account Page" horizontalAlignment="center" verticalAlignment="middle"/>
			</GridLayout>
		</TabContentItem>
		<TabContentItem class="third-tabcontent">
			<GridLayout>
				<Label text="Search Page" horizontalAlignment="center" verticalAlignment="middle"/>
			</GridLayout>
		</TabContentItem>

	</BottomNavigation>

TabStripItem.tabstripitem {
	background-color: teal;
}

TabStripItem.tabstripitem:active {
	background-color: yellowgreen;
}

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

.fas {
	font-family: "Font Awesome 5 Free", "fa-solid-900";
	font-weight: 900;
}

.t-36 {
	font-size: 36;
}

デモソース

プロパティ

BottomNavigationプロパティ

TabStripプロパティ

TabStripItemプロパティ

イベント

BottomNavigationイベント

TabStripイベント

TabStripItemイベント

APIリファレンス

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