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.

@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

LIVE DEMO

Use themeNames attribute to set a component theme.

Variant Description Supported By

icon-on-top

Applies to an individual tab element. Set themeNames="icon-on-top" on the tab to position the icon above the label text.

Lumo

centered

Centers the tabs within the container.

Lumo

small

Makes the tabs smaller.

Aura, Lumo

minimal

Reduces the visual style to emphasize labels only.

Lumo

hide-scroll-buttons

Hides the scroll buttons used to navigate overflown tabs.

Aura, Lumo

equal-width-tabs

Allocates equal width to all tabs and disables scrolling.

Lumo

bordered

Adds a border around the tabs and content area.

Lumo

no-padding

Removes the default padding from the content area.

Aura, Lumo

no-border

Removes the border around the tab sheet.

Aura

See Also

See Vaadin Docs for more information.