First page Back Continue Last page Graphics

Creating Stacked Tabs


Creating Stacked Tabs

Using af:panelTabbed to create tabbed panes is similar to using af:panelAccordion to create accordion panes. After adding an af:panelTabbed component, insert a series of af:showDetailItem components to provide the tabbed pane contents for display.

To display and hide contents using PanelTabbed, perform the following steps:

1. Add the af:panelTabbed component to the JSF page.

2. Set the position attribute to below if you want the tabs to be rendered below the contents in the display area. By default, position is above. This means the tabs are rendered above the contents in the display area. The other acceptable value is both, where tabs are rendered above and below the display area.

3. To add a tabbed pane, insert the af:showDetailItem component inside af:panelTabbed. You can add as many tabbed panes as you want.

4. To add contents for display in a pane, insert the desired children components into each af:showDetailItem component.

The example in the slide shows three tabs, positioned at both top and bottom. Each tab is defined by a show detail item component, each of which contains a table as content for the tab.