tabs

LIVE DEMO

A set of tabs that can trigger changes in the associated content area. Unlike tabSheet, this component cannot hold any content within itself.

  • XML element: tabs

  • Java class: Tabs

Basics

By default, tabs are displayed in a horizontal row, with the tab labels arranged one after another. This row of tabs is typically positioned at the top or bottom of the associated content area.

The following example demonstrates basic tabs functionality.

tabs basic
XML code 
<tabs id="tabs">
    <tab id="tab1" label="Tab One"/>
    <tab id="tab2" label="Tab Two"/>
</tabs>

In this example, the component contains two nested tab elements. To update the content associated with the selected tab, define an event handler that listens for the SelectedChangeEvent. When a tab is selected, this event is fired, allowing you to update the displayed content accordingly.

Orientation

While horizontal orientation is default, vertical orientation can be alternative option in certain scenarios. For example, with a larger number of tabs, this orientation may provide additional space for their labels.

tabs vertical

Use the orientation attribute to change the orientation of tabs.

States

A tab can be selected, unselected, or disabled:

tabs states

These states allow users to easily determine which tab is currently active and which tabs may be temporarily unavailable or disabled.

Labels

Individual tabs can nest almost any components within them. This allows to compose visually distinctive tab labels:

tabs basic2
XML code 
<tabs>
    <tab id="profileTab">
        <icon icon="USER"/>
        <span text="Profile"/>
    </tab>
    <tab id="notificationsTab">
        <icon icon="BELL"/>
        <span text="Notifications"/>
    </tab>
    <tab id="settingsTab">
        <icon icon="COG"/>
        <span text="Settings"/>
    </tab>
</tabs>

Theme Variants

The component’s appearance is customizable with the themeNames attribute. Choose from the following themes and combine them together as needed:

icon-on-top

When a tab label includes an icon, positions it above the text label instead of displaying them side-by-side:

tabs icon on top

Each tab element must have this theme applied to it individually.

Show XML 
<tabs>
    <tab id="profileTab" themeNames="icon-on-top">
        <icon icon="USER"/>
        <span text="Profile"/>
    </tab>
    <tab id="notificationsTab" themeNames="icon-on-top">
        <icon icon="BELL"/>
        <span text="Notifications"/>
    </tab>
    <tab id="settingsTab" themeNames="icon-on-top">
        <icon icon="COG"/>
        <span text="Settings"/>
    </tab>
</tabs>

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

Note that horizontal scrolling may be difficult with these buttons disabled.

equal-width-tabs

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

tabs equal width

Attributes

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

orientation

Vaadin

Defines tabs orientation. Possible values:

  • HORIZONTAL – tabs are placed horizontally. This is the default value.

  • VERTICAL – tabs are placed vertically.

Handlers

AttachEvent - DetachEvent - SelectedChangeEvent

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

SelectedChangeEvent

com.vaadin.flow.component.tabs.Tabs.SelectedChangeEvent is fired when another tab is selected.

The following example adds a label when a tab is selected:

@ViewComponent
private VerticalLayout content;

@Subscribe("tabs")
public void onTabsSelectedChange(final Tabs.SelectedChangeEvent event) {
    setTabContent(event.getSelectedTab());
}
private void setTabContent(Tab tab) {
    content.removeAll();
    Div tabLabel = uiComponents.create(Div.class);
    if ("tab1".equals(tab.getId().orElse(null))) {
        tabLabel.setText("Tab One is selected");
        content.add(tabLabel);
    } else {
        tabLabel.setText("Tab Two is selected");
        content.add(tabLabel);
    }
}

Elements

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

tab

Individual tabs are defined with nested tab elements.

tab attributes

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

tab handlers

AttachEvent - DetachEvent

See Also

See the Vaadin Docs for more information.