tabs

LIVE DEMO

tabs creates a set of tabs that can trigger changes to content on the view. Unlike tabSheet, this component cannot hold any content.

  • XML element: tabs

  • Java class: Tabs

Basics

Below is a simple example of tabs:

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

Components can be nested inside tab elements to compose more complex labels:

<tabs>
    <tab id="tab3">
        <icon icon="HOME"/>
        <span text="Home"/>
    </tab>
    <tab id="tab4">
        <icon icon="INFO_CIRCLE"/>
        <span text="Information"/>
    </tab>
</tabs>
tabs basic2

Tab

Individual tabs are defined with the nested tab elements.

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

Attributes

Each tab element can have the following attributes:

id - classNames - colspan - enabled - flexGrow - label - themeNames - visible

flexGrow

MDN

Sets the flex grow factor for this tab. When set to 0, the tab width is fixed.

Handlers

Each tab element can have the following handlers:

AttachEvent - DetachEvent

Attributes

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

orientation

Vaadin

Defines tabs orientation. Possible values:

  • VERTICAL – tabs are placed vertically.

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

themeNames

Vaadin

Sets a different theme to change component’s appearance.

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

io.jmix.flowui.component.tabsheet.JmixTabSheet.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();
    Label tabLabel = uiComponents.create(Label.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

tab

See Also

See the Vaadin Docs for more information.