tabSheet

LIVE DEMO

A layout that creates several tabs with content. Only the content of the selected tab is visible at a time.

XML Element

tabSheet

Java Class

JmixTabSheet

Attributes

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

Handlers

AttachEvent - DetachEvent - SelectedChangeEvent

Elements

tab

Basics

To create the component, use tabSheet XML element and add several tab elements. Each tab can only have one child component. If you need to include multiple components within a tab, you must wrap them with a layout component, such as vbox.

The following example demonstrates how a basic tabSheet is created:

<tabSheet>
    <tab id="tab1" label="Tab One">
        <vbox>
            <label text="Label One"/>
            <textField placeholder="Text Field One"/>
        </vbox>
    </tab>
    <tab id="tab2" label="Tab Two">
        <label text="Label Two"/>
    </tab>
    <tab id="tab3" label="Tab Three">
        <label text="Label Three"/>
    </tab>
</tabSheet>
tabsheet basic

Tab Element

The contents of an individual tab is described by the tab element.

To add tab in Jmix Studio, select the component in the view descriptor XML or in the Jmix UI structure panel and click on the Add→Tab button in the Component Inspector panel.

XML Element

tab

Java Class

Tab

Attributes

id - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - flexGrow - label - lazy - themeNames - visible

Handlers

AttachEvent - DetachEvent

Elements

tooltip

Number of Tabs

The tabSheet component can have any practical number of tabs. To adapt to the available space the component will add scroll buttons, ensuring that all tabs remain accessible to users.

tabsheet tabs number

States

Tab state allows users to easily determine which tab is currently active and which tabs may be temporarily unavailable or disabled. A tab can be selected, unselected, or disabled.

tabs states

Custom Labels

LIVE DEMO

Tab labels are not limited to just text. You can include almost any components through programmatic definition.

tabsheet labels

Badges

LIVE DEMO

One particularly useful case is adding dynamic badges to tab labels. Such badges can provide an indication of the quantity of items, notifications, or other information related to the tab’s contents.

tabsheet badges

Detect Tab Switch

Whenever the user switches between tabs, the io.jmix.flowui.component.tabsheet.JmixTabSheet.SelectedChangeEvent is fired. Create an event handler to execute custom code in response to the tab switch.

The following code will send a notification on every tab switch:

@Subscribe("tabSheet")
public void onTabSheetSelectedChange(final JmixTabSheet.SelectedChangeEvent event) {
    notifications.create(event.getSelectedTab() + " is now selected").show();
}

Lazy Tabs

A tab can be configured to load its content lazily, meaning the content is only loaded when a user selects that specific tab. This reduces the number of components in memory.

To enable lazy loading, set the lazy attribute of the tab element to true:

<tabSheet id="tabSheet">
    <tab id="normalTab" label="Normal Tab">
        <vbox>
            <textField placeholder="textField"/>
            <button text="button"/>
        </vbox>
    </tab>
    <tab id="lazyTab" label="Lazy Tab" lazy="true">
        <vbox>
            <button text="button"/>
            <textField placeholder="textField"/>
        </vbox>
    </tab>
</tabSheet>

Components inside a lazy tab do not exist when the view is opened, so they cannot be injected into a controller or obtained in the view lifecycle event handlers. You can access these components only after the user opens the tab. The SelectedChangeEvent handler allows you to detect which tab has been selected and access the components using the UiComponentUtils.getComponent() method.

In the following example the second tab is set to lazy loading, and its content is loaded only when the user selects it. The current number of components in each tab is displayed using a supplementary span element.

tabsheet lazy 
@ViewComponent
private Span contentInfo;
@ViewComponent
private JmixTabSheet tabSheet;
@Autowired
private Notifications notifications;

@Subscribe
public void onInit(final InitEvent event) {
    checkTabsContent();
}
@Subscribe("tabSheet")
public void onTabSheetSelectedChange(final JmixTabSheet.SelectedChangeEvent event) {
    checkTabsContent();
}

protected void checkTabsContent () {
    StringBuilder sb = new StringBuilder();
    List<Component> tab1Content = tabSheet.getContentByTab(tabSheet.getTabAt(0)).getChildren().toList();
    sb.append(tab1Content.isEmpty() ? "Empty" :  tab1Content.size() + " components");

    sb.append(" / ");
    List<Component> tab2Content = tabSheet.getContentByTab(tabSheet.getTabAt(1)).getChildren().toList();
    sb.append(tab2Content.isEmpty() ? "Empty" : tab2Content.size() + " components");

    contentInfo.setText(sb.toString());
}

Theme Variants

The component’s appearance is customizable with the themeNames attribute, which allows you to select among six different options:

centered

Positions the tabs at the center of the container or view, instead of their default left-aligned position:

tabs centered
small

Makes the tabs smaller:

tabs small

minimal

Reduces visual style to only show tab labels without any additional visual elements:

tabs minimal

hide-scroll-buttons

Hides the scroll buttons that assist in navigating overflown tabs:

tabs hide scroll buttons

equal-width-tabs

Allocates an equal amount of space to each tab and disables the ability to scroll:

tabs equal width

bordered

Adds a border around the tabs themselves, as well as the content area.

tabsheet bordered

See Also

See Vaadin Docs for more information.