Tabs can be created with one or more `<tc:tab/>` within a `<tc:tabGroup>`. Within a tab, content can be added like in a section or a panel.

To activate Ajax, the `switchType` attribute must have the value "reloadTab". On all tab groups on this page, Ajax is activated.

Tag Library Documentation: | |

A simple tab group. The second tab is disabled.

First tab. Second tab. Third tab.

This example show the different headers if the `label` or the `image` is used.

Only a label is set.

<tc:tab label="Only label"/>

A label and an image are set.

<tc:tab label="Label with image" image="\#{request.contextPath}/image/feather-leaf.png">

Only an image is set.

<tc:tab image="\#{request.contextPath}/image/feather-leaf.png">

Neither a label or an image are set. In this case the header gets a label with the indexnumber of the tab in the tab group.

The image in the header depends on what tab is currently selected.

<tc:tabGroup selectedIndex="\#{tabController.index}">

First folder open.

Second folder open.

Third folder open.

The `<tc:tabChangeListener/>` tag is used to bind a `TabChangeListener`. The `TabChangeListener` is an interface, which is implemented in this example by `SimpleTabChangeListener`.

`<tc:tabChangeListener type="org.apache.myfaces.tobago.example.demo.actionlistener.SimpleTabChangeListener" binding="\#{tabController.tabChangeListener}"/>`

Changed to tab one.

Changed to tab two.

Changed to tab three.

If no switch type is activated with `switchType="none"`, you have full control over the tab group. In this example the tabs are used as buttons to refresh the timestamps. The functionality of switching the tab comes explicitly by adding the id of the tab group to the ajax tag.

One Two Three