tabBar - タブバー

ボタンを配置できるバナーを表示します。

カテゴリ

[モバイル]

構文

<xe:tabBar attributes>content</xe:tabBar>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `tabBar1`、`tabBar2` などです。
barType	個々のボタンに分かれてはいるが、複数のタブバーボタンをまとめて 1 つとして表示するには、`segmentedControl` として指定します。
inHeading	見出しの中にバーを配置するには、`true` として指定します。

表 2. すべてのプロパティ
カテゴリ	プロパティ
アクセシビリティ	title
basics	barType、binding、dir、id、inHeading、lang、loaded、rendered、rendererType
dojo	dojoAttributes、dojoType、tooltip
styling	disableTheme、style、styleClass、themeId

例

以下の例は、3 つのボタンを持つタブバーを示しています。

<xe:tabBar id="documentTabBar" barType="segmentedControl">
	<xe:tabBarButton id="tabBarButtonCancel" label="Cancel">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="true" save="false">
			<xp:this.action>
				<xe:moveTo targetPage="viewPage" transitionType="slide" direction="Right to Left"></xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
	<xe:tabBarButton id="tabBarButtonEdit" label="Edit" rendered="#{javascript:!document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xp:changeDocumentMode mode="edit" var="document1"></xp:changeDocumentMode>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
	<xe:tabBarButton id="tabBarButtonSave" label="Save" rendered="#{javascript:document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xe:moveTo forceFullRefresh="true" saveDocument="true"
					targetPage="viewPage" transitionType="slide" direction="Left to Right">
				</xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
</xe:tabBar>