tabSheet

tabSheet organizes content into tabs and displays one tab at a time.

XML Element

tabSheet

Java Class

JmixTabSheet

Basics

LIVE DEMO

Add tab elements to tabSheet. Each tab accepts one content component; wrap multiple components in a layout such as vbox.

The following example demonstrates how a basic tabSheet is created:

<tabSheet width="100%">
    <tab id="tab1" label="Tab 1">
        <vbox>
            <span text="Span 1"/>
            <textField label="TextField 1"/>
            <button text="Button 1"/>
        </vbox>
    </tab>
    <tab id="tab2" label="Tab 2">
        <vbox>
            <span text="Span 2"/>
            <textField label="TextField 2"/>
            <button text="Button 2"/>
        </vbox>
    </tab>
</tabSheet>

Number of Tabs

When tab labels exceed the available width, the tab bar displays scroll buttons so that the remaining tabs stay accessible.

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

Build a Tab programmatically to use components such as icons alongside its text label. The example creates three icon-and-text labels and can place the icons above the text in the Lumo theme.

XML
<layout>
    <!-- theme-only:lumo -->
    <checkbox id="iconControlCheckbox" label="Icon on top"/>
    <!-- theme-only:lumo:end -->
    <tabSheet id="tabSheet" width="100%"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    initTabSheet();
}

protected void initTabSheet() {
    tabSheet.add(createProfileTab(), new Span("Profile tab content"));
    tabSheet.add(createNotificationsTab(), new Span("Notifications tab content"));
    tabSheet.add(createSettingsTab(), new Span("Settings tab content"));
}
// theme-only:lumo
@Subscribe("iconControlCheckbox")
protected void onIconControlCheckboxValueChane(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    if (event.getValue()) {
        tabSheet.getChildren().forEach(tab -> ((Tab) tab).addThemeVariants(TabVariant.LUMO_ICON_ON_TOP));
    } else {
        tabSheet.getChildren().forEach(tab -> tab.getElement().getThemeList().clear());
    }
}
// theme-only:lumo:end

protected Tab createProfileTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.USER.create(), new Text("Profile"));

    return tab;
}

protected Tab createNotificationsTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.BELL.create(), new Text("Notifications"));

    return tab;
}

protected Tab createSettingsTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.COG.create(), new Text("Settings"));

    return tab;
}

Badges

LIVE DEMO

Badges in tab labels can show item counts, notifications, or other concise status information. The example creates each label from text and a themed span containing a count.

XML
<layout classNames="tab-sheet-badges">
    <tabSheet id="tabSheet" width="100%"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    initTabSheet();
}

protected void initTabSheet() {
    tabSheet.add(createIssueTab(), new Span("Issue tab content"));
    tabSheet.add(createFeatureTab(), new Span("Feature tab content"));
    tabSheet.add(createBugTab(), new Span("Bug tab content"));
}

protected Tab createIssueTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Issues"), createBadge(15, "contrast"));

    return tab;
}

protected Tab createFeatureTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Features"), createBadge(132, "success"));

    return tab;
}

protected Tab createBugTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Bugs"), createBadge(32, "error"));

    return tab;
}

protected Span createBadge(int value, String theme) {
    Span badge = new Span(String.valueOf(value));
    badge.getElement().getThemeList().add("badge small " + theme);
    badge.addClassName("tab-badge");
    return badge;
}

Lazy Tabs

LIVE DEMO

A lazy tab creates its content only when selected, reducing the number of initially instantiated components. The example adds LazyComponent instances programmatically and observes selected-tab changes to show when their content has been created.

XML
<layout>
    <tabSheet id="tabSheet" width="100%" themeNames="bordered">
        <tab id="tab1" label="Tab 1">
            <vbox>
                <span text="Span 1"/>
                <textField label="TextField 1"/>
                <button text="Button 1"/>
            </vbox>
        </tab>
    </tabSheet>
    <span text="Created content:"/>
    <span id="spanInfo"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;
@ViewComponent
protected Span spanInfo;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    tabSheet.add("LazyTab 1", new LazyComponent(this::getLazyTabContent));
    tabSheet.add("LazyTab 2", new LazyComponent(this::getLazyTabContent));

    checkComponents();
    tabSheet.addSelectedChangeListener(e -> checkComponents());
}

protected Component getLazyTabContent() {
    VerticalLayout content = uiComponents.create(VerticalLayout.class);

    Span info = uiComponents.create(Span.class);
    info.setText("Lazy Span");

    TypedTextField<String> textField = uiComponents.create(TypedTextField.class);
    textField.setLabel("Lazy textField");

    JmixButton button = uiComponents.create(JmixButton.class);
    button.setText("Lazy button");

    content.add(info, textField, button);
    return content;
}

protected void checkComponents() {
    StringBuilder sb = new StringBuilder("Tab 1 = ");
    List<Component> tab1Content = tabSheet.getContentByTab(tabSheet.getTabAt(0)).getChildren().toList();
    sb.append(tab1Content.isEmpty() ? "null" : "true");

    sb.append(", LazyTab 1 = ");
    List<Component> tab2Content = tabSheet.getContentByTab(tabSheet.getTabAt(1)).getChildren().toList();
    sb.append(tab2Content.isEmpty() ? "null" : "true");

    sb.append(", LazyTab 2 = ");
    List<Component> tab3Content = tabSheet.getContentByTab(tabSheet.getTabAt(2)).getChildren().toList();
    sb.append(tab3Content.isEmpty() ? "null" : "true");

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

Theme Variants

LIVE DEMO

Use the 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

Attributes

Common attributes apply to tabSheet and its tab elements. The following attribute is specific to tab:

Name Description Default

lazy

Defers creation of the tab content until the tab is selected.

false

Handlers

Name Description

AttachEvent

Fires when tabSheet or a tab is attached to the UI.

DetachEvent

Fires when tabSheet or a tab is detached from the UI.

SelectedChangeEvent

Fires when the selected tab changes.

Elements

A tabSheet contains tab elements. Each tab accepts one content component and can contain tooltip as a nested element.

See Also