Tab Client

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.

Changing tabs is client side by default.

Basics

A simple tab group. The second tab is disabled.

First 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 is set.

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

A label and an image is set to an bootstrap icon.

<tc:tab label="Label with icon" image="bi-gender-female">

Only an image is set.

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

Only an image is set to an bootstrap icon.

<tc:tab image="bi-gender-male">

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

It's also possible to set the label via a label facet. So you can use e.g. converters.

If using this, don't forget to set labelLayout="skip" plain="true" to switch off the layout and boxes of the components.