tabbedPanel - Tabbed Panel
Serves as a collection of containers for other controls and text.
Category
Container ControlsSyntax
<xp:tabbedPanel attributes>
<xp:tabPanel attributes>content</xp:tabPanel></xp:tabbedPanel>
...
</xp:tabbedPanel>
Property | Description |
---|---|
id | (tabbedPanel ) Defaults
to tabbedPanel1 , tabbedPanel2 , and
so on.( |
selectedTab | (tabbedPanel ) Initially
opens the tabbed panel to this tab. |
text | (tabPanel ) Provides
a label for the tab. |
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 |
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>