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

tab 元素中可以放入其他组件以提供更加复杂的标题：

<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 元素定义。

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

XML 属性

每个 tab 元素可以有下列属性：

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

flexGrow

MDN

设置该标签页的 flex 值。当设置为 0 时，标签页的宽度固定。

事件和处理器

每个 tab 元素支持下列事件：

AttachEvent - DetachEvent

XML 属性

id - alignSelf - 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();
    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);
    }
}

XML 内部元素

tab

参考

Vaadin 文档