tabs

tabs creates a set of tabs. Unlike tabSheet, it cannot contain tabs content.

  • XML element: tabs

  • Java class: Tabs

Basics

tabs can have any practical number of tabs. You can define them as follows:

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

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.

Use SelectedChangeEvent to change content on the page or call other actions in response to tab switch.

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);
    }
}

See Also

See the Vaadin Docs for more information.