tabbedPanel - Tabbed Panel

Serves as a collection of containers for other controls and text.

Category

Container Controls

Syntax

<xp:tabbedPanel attributes>
	<xp:tabPanel attributes>content</xp:tabPanel></xp:tabbedPanel>
	...
</xp:tabbedPanel>
Table 1. Essential properties
Property Description
id (tabbedPanel) Defaults to tabbedPanel1, tabbedPanel2, and so on.

(tabPanel) Defaults to tabPanel1, tabPanel2, and so on.
selectedTab (tabbedPanel) Initially opens the tabbed panel to this tab.
text (tabPanel) Provides a label for the tab.
Table 2. All properties (tabbedPanel)
Category Properties
accessibility role, title
Note: The role property is obsolete starting with 9.0.1. By default the appropriate compliant value is generated. For compliance with accessibility standards, do not specify a value for this property.
basics attrs, binding, dir, id, lang, loaded, rendered, rendererType, selectedTab
styling containerStyleClass, disableTheme, outerStyleClass, style, styleClass, themeId
Table 3. All properties (tabPanel)
Category Properties
accessibility imageAlt, role, title
Note: The role property is obsolete starting with 9.0.1. By default the appropriate compliant value is generated. For compliance with accessibility standards, do not specify a value for this property.
basics binding, dir, href, id, image, label, lang, loaded, rendered, rendererType
events onClick
styling contentStyleClass, disableTheme, endTabStyleClass, middleTabStyleClass, selectedTabStyleClass, startTabStyleClass, style, styleClass, themeId, unselectedTabStyleClass

Usage

At run time, the content of the selected tab panel appears on the page. The other tabs are visible but not their content. The user changes panels by selecting tabs.
In Design mode, putting focus on a tabbed panel selects the tabbedPanel element. To work with the tabPanel elements, right-click or use the menu to do the following:
  • Select Active Tab Contents puts focus on the tabPanel element for the tab in focus.
  • Remove Active Tab removes the tabPanel element for the tab in focus.
  • Insert Tab inserts a new tabPanel element.
  • Append Tab appends a new tabPanel element.

Examples

This Tabbed Panel control has two panels.
<xp:tabbedPanel id="tabbedPanel1" selectedTab="tabPanel1">
	<xp:tabPanel id="tabPanel1" label="Day">
		<xp:inputText id="inputText2"
			value="#{document1.phoneday}">
		</xp:inputText>
	</xp:tabPanel>
	<xp:tabPanel label="Night" id="tabPanel2">
		<xp:inputText id="inputText3"
			value="#{document1.phonenight}">
		</xp:inputText>
	</xp:tabPanel>
</xp:tabbedPanel>