The Tab Set component
in
the Palette's Layout category is a container for a set of Tab components.
Typical uses of a tab set are:
A Tab Set component contains Tab components , and Tab components can contain other Tab components. You can see these components displayed as hierarchical nodes in the
after you add a Tab Set to your page.
You can add a new tab to a tab set in two ways, by right-clicking the Tab Set component and choosing Add Tab or by dropping a new tab component on the Tab Set or on a Tab component.
You can drop a new tab component on a tab set in the Visual Designer to the right or left of existing tabs to create a new tab at that level. The tabs in a tab set can also be containers for other tabs. If you drop a Tab component on an existing tab, the new tab becomes a child of the tab on which you dropped it. The maximum number of levels for tabs is three.
For example, the following figure shows a tab set with three levels of tabs. Tab 1 has three child tabs, Tab 4, Tab 5, and Tab 6. Tab 4 has two child tabs, Tab 7 and Tab 8.
The tab set component determines which tab is rendered as selected, storing the value in the selected
property. By default, the selected
property is set to the first tab created for the component. If you click a tab while designing your web page, that tab becomes the selected tab. You can tell during design time that a tab is selected because its color changes, as shown in the previous figure, in which Tab 1, Tab 4, and Tab 7 have been selected.
selected
property is not updated, and the tab set outputs the previously selected tab as selected
.In other words, by default, a user cannot move from one tab to another until they have provided valid values for all the current tab's input components. This behavior might be appropriate if your users are required to set values of input components on a tab prior to going to another tab, as they would in a wizard.
If you want to circumvent this behavior, you can set the tab set to be immediate
. However, the side effect is that you can no longer reliably bind the tab set's selected
property. The bound value will be updated if there are no invalid input components, but it will not be updated if there are invalid input components in the current tab.
immediate
property for a tab set and its tabs affects behavior of the tab set:
immediate
, and tabs 1 and 2 contain required fields with validators. Validation errors are thrown, and the user cannot swich tabs until validation errors are resolved.immediate
, and tabs are not. Tabs 1 and 2 contain required fields with validators.
Validation errors are thrown, and the user can switch tabs.
immediate
, and tabs 1 and 2 contain required fields with validators.
Validation errors are not thrown, and the user can switch tabs.immediate
, but the tabs are. Tabs 1 and 2 contain required fields with validators. The user is unable to switch between tabs.