tabs

tabs 创建一组标签页。与 tabSheet 不同，该组件不能包含标签内容。

  • XML 元素：tabs

  • Java 类：Tabs

基本用法

tabs 可以有任何数量的标签页。可以按下面的方式定义：

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

如需在 Jmix Studio 中添加 tab，在视图描述 XML 或 Jmix UI 层级面板中选择组件，然后点击 Jmix UI 组件面板的 Add→Tab 按钮。

使用 SelectedChangeEvent 修改页面的内容或调用其他响应标签页切换的操作。

XML 属性

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

orientation

Vaadin

定义标签页方向。支持下列值：

  • VERTICAL - 标签垂直放置。

  • HORIZONTAL - 标签水平方式。这是默认值。

themeNames

Vaadin

设置不同的主题，修改组件的外观。

事件和处理器

AttachEvent - DetachEvent - SelectedChangeEvent

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

SelectedChangeEvent

当用户选择其他标签页时触发 io.jmix.flowui.component.tabsheet.JmixTabSheet.SelectedChangeEvent 事件。

下面的示例中，当选中不同标签页时添加一个标签：

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

参考

Vaadin 文档