TabView and Tab

Add quick, dynamic tab functionality to transition through panes of local content. You can also have complex content in your tabs like the thumbnail in the third tab:

This is the first tab.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

This is the second tab.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2008-0608 (7119) Ulun Danu Temple by Jennifer, on Flickr

Ulun Danu Beratan Temple

Ulun Danu Temple is a Balinese Hindu Temple located at Candi Kuning countryside. It is set at lakeside of Beratan with beautiful lake view and hills surround it. It is situated in the plateau area with cool atmosphere surround it and hills as a backdrop.

This is the fourth tab. As you can see, you can add arbitrary content to the tab title. In particular, you can add images.

You can achieve this by defining a facet called anchor :

<b:tab title="Fancy tab">
<f:facet name="anchor"><b:iconAwesome name="cog" spin="true" /></f:facet>
Content of the tab.
</b:tab>

However, this fancy tab is an example how to create an unruly design. Don't use too many visual effects.

Optionally, your server-side bean can define which tab is shown. You can achieve this by using the property activeIndex . For instance, the example above uses activeIndex="# {testBean.index}" , which enables use to open the next tab by clicking a command button. When you click a tab, the index is update: "2".

You can also use a negative tab index. In this case, the tabs are counted from the right hand side. For instance, activeIndex="-1" activates the right-most tab.

Updating the tab index in the Java bean since 1.0.1

In the example above the active tab index is defined by an attribute of a Java bean: activeIndex="# {testBean.index}". BootsFaces updates the value of the attribute of the Java bean on any request. However, BootsFaces can't do that if you use a method or a constant to define the active index, such as activeIndex="# {testBean.getIndex()}" or activeIndex="1". In this case, the default value is overriden by the user's click, and the connection between the back-end and the active tab index is lost.

Persistent tab selection

By default, the first tab is opened, or the tab defined by activeIndex . This also holds true after a postback (i.e. after clicking a command button that shows the current JSF page again), unless you put the <b:tabView /> into the same form as the button.

After a page reload ( F5 or CTRL+R ) the initial state is always shown. That's because JSF considers page reloads as a sort of a reset. Everything that's stored in the ViewScope is lost.

Tabs with borders

You can use add some CSS commands to convert the tab into a more traditional tab with borders:

Put some text here.

Tab pills since 0.8.5

You can use the pills setting to render pills instead of tabs:

Put some text here.

Tab position since 0.8.5 - experimental

You can also set the tab position to 'top', 'left', 'right' and 'bottom'. The left and right setting, force the use of pills to manage also the nav-stacked style when the page resize.


Bottom Tab

Put some text here.


Left Tab

Put some text here.


Right Tab

Put some text here.

Disabled and hidden tabs and tabViews since 1.0.1

You can use the attribute rendered="false" to hide both the entire TabView or an individual tab. Similarly, you can use the attribute disabled="true" to gray out the entire TabView or an individual tab.


Disabling the entire TabView

That's a pretty radical step. You can't activate any of the tabs. Nor is the content of any of the tabs ever shown.

Put some text here.

Disabling and hiding individual tabs

Inactive tabs can't be activated by clicking. If the currently active tab is disabled, the next tab is activated, until an enabled tab is found. In the example below, the first tab is initially active. However, it's disabled, so the next tab is activated. It's an enabled tab, so it's rendered as active. If none of the tabs were enabled, there's no active tab - just like in the example above.

If the active index is defined by an bean attribute, such as activeIndex="# {testBean.index}, the bean attribute value if updated to the real index during the rendering phase. If every tab is disabled, the bean attribute is set to Integer.MAX_VALUE.

This tab is disabled.
Put some text here.
This tab is disabled.

Hiding the entire TabView

This demo is sort of hard to demonstrate, but we included it for testing purposes nonetheless. Below you see (or rather: you don't see) a tabView with rendered="false".

AJAX and JavaScript since 0.8.0

<b:tabView > and <b:tab > support many JavaScript and AJAX events, as described in the description of AJAX in BootsFaces. Basically, each of the many JavaScript callback handlers (the on[event] attributes) also supports AJAX. To get familiar with BootsFaces AJAX, try the BootsFaces AJAX demo project.

first tab
second tab

Reference section

Attribute Default value Description
active-index
activeIndex (alternative writing)
0 Optional attribute to define which tab is active initially.
ajax false Activates AJAX. The default value is false (no AJAX).
content-class
contentClass (alternative writing)
(none) Style class of the div surrounding the panes.
content-style
contentStyle (alternative writing)
(none) Inline CSS style of the div surrounding the panes.
dir (none) Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content).
disabled false Disables the input element, default is false.
id (none) Unique identifier of the component in a namingContainer.
immediate false Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false.
onclick (none) OnClick DHTML event .
oncomplete (none) JavaScript to be executed when ajax completes with success.
onhidden (none) JavaScript and/or AJAX code to be executed just after pushing a tab to the back
onhide (none) JavaScript and/or AJAX code to be executed just before pushing a tab to the back
onshow (none) JavaScript and/or AJAX code to be executed just before bringing a tab to the front
onshown (none) JavaScript and/or AJAX code to be executed just after bringing a tab to the front
pills false Change the rendering of tab to pills mode. Default false
process (none) Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
role (none) The role can be used to provide information to screenreaders.
style-class
styleClass (alternative writing)
(none) Style class of the div surrounding this element.
tabPosition (none) Position of tabs. Legal values are: left, right, top, bottom. Default is top
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
update (none) Component(s) to be updated with ajax.
Attribute Default value Description
ajax false Activates AJAX. The default value is false (no AJAX).
content-style
contentStyle (alternative writing)
(none) Inline CSS of the div surrounding the tab pane.
dir (none) Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content).
disabled false Disables the input element, default is false.
id (none) Unique identifier of the component in a namingContainer.
immediate false Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false.
onclick (none) Optional JavaScript function that's called when the tab is clicked.
oncomplete (none) JavaScript to be executed when ajax completes with success.
process (none) Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
style (none) Inline CSS of the tab.
style-class
styleClass (alternative writing)
(none) Style class of the div surrounding the tab pane.
title (none) Caption of the tab.
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
update (none) Component(s) to be updated with ajax.

<b:tabView> and <b:tab> use the standard Bootstrap CSS classes as defined by the Bootstrap documentation:

The entire tab (tab strip and content area) is surrounded by a div bearing the CSS class tab-panel .

The tab area bears the CSS classes nav and nav-tabs .

The content area bears the CSS class tab-content .

The individual tab panes in the content area bear the CSS class tab-pane .