tabs

tabs lets users switch between associated content areas without containing the content itself.

XML Element

tabs

Java Class

Tabs

Basics

LIVE DEMO

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 width="100%">
    <tab id="issueTab" label="Issues"/>
    <tab id="featureTab" label="Features"/>
    <tab id="bugTab" label="Bugs"/>
</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

LIVE DEMO

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.

Use the orientation attribute to change the orientation of tabs.

XML
<checkbox id="orientationCheckbox" label="Vertical"/>
<tabs id="tabs" width="100%">
    <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>
Java
@ViewComponent
protected Tabs tabs;

@Subscribe("orientationCheckbox")
protected void onOrientationCheckboxValueChane(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    tabs.setOrientation(event.getValue() ? Tabs.Orientation.VERTICAL : Tabs.Orientation.HORIZONTAL);
}

States

LIVE DEMO

A tab can be selected, unselected, or disabled:

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

XML
<tabs id="tabs" width="100%">
    <tab id="tab1" label="Selected"/>
    <tab id="tab2" label="Unselected"/>
    <tab id="tab3" label="Disabled" enabled="false"/>
</tabs>
Java
@Subscribe("tabs")
protected void onTabsSelectChangeEvent(Tabs.SelectedChangeEvent event) {
    event.getPreviousTab().setLabel("Unselected");
    event.getSelectedTab().setLabel("Selected");
}

Labels

LIVE DEMO

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

<tabs id="tabs" width="100%">
    <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

LIVE DEMO

Use the themeNames attribute to apply one or more theme variants.

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

Attributes

The following attributes are specific to tabs:

Name Description Default

orientation

Defines tabs orientation.

—

The following shared attributes are supported by tabs:

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

Handlers

The following handlers are specific to tabs:

Name Description

SelectedChangeEvent

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

The following shared handlers are supported by tabs:

AttachEvent - DetachEvent

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