tabBar - Tab Bar

Presents a banner upon which buttons can be placed.

Category

Mobile

Syntax

<xe:tabBar attributes>content</xe:tabBar>
Table 1. Essential properties
Property Description
id Defaults to tabBar1, tabBar2, and so on.
barType Specify as segmentedControl to display tab bar buttons together as one although separated into individual buttons.
inHeading Specify as true to position the bar inside the heading.
Table 2. All properties
Category Properties
accessibility title
basics barType, binding, dir, id, inHeading, lang, loaded, rendered, rendererType
dojo dojoAttributes, dojoType, tooltip
styling disableTheme, style, styleClass, themeId

Examples

This example demonstrates a tab bar with three buttons.
<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>