tabSheet 标签面板

tabSheet 将内容组织到标签页中，一次显示一个标签页。

XML 元素

tabSheet

Java 类

JmixTabSheet

基本用法

在线示例

在 tabSheet 中添加 tab 元素。每个 tab 只能包含一个子组件。多个子组件必须通过布局包装，比如 vbox。

下面示例展示了 tabSheet 的基本用法：

<tabSheet width="100%">
    <tab id="tab1" label="Tab 1">
        <vbox>
            <span text="Span 1"/>
            <textField label="TextField 1"/>
            <button text="Button 1"/>
        </vbox>
    </tab>
    <tab id="tab2" label="Tab 2">
        <vbox>
            <span text="Span 2"/>
            <textField label="TextField 2"/>
            <button text="Button 2"/>
        </vbox>
    </tab>
</tabSheet>

标签页数量

当标签页过多超过了可用宽度时，标签栏会自动显示滚动按钮，确保用户可以访问所有的标签页。

tabsheet tabs number

标签页状态

用户可以通过标签页状态判断哪个是目前使用的标签页，以及哪些标签页可能暂时不可用或被禁用。一个 tab 可以被选择、不选择或被禁用。

tabs states

自定义标签

在线示例

以编程方式构建 Tab，除了其文本外，还可以使用图标等组件。示例创建了三个带有图标和文本的标签页，并可以在 Lumo 主题中将图标放置在文本上方。

XML
<layout>
    <!-- theme-only:lumo -->
    <checkbox id="iconControlCheckbox" label="Icon on top"/>
    <!-- theme-only:lumo:end -->
    <tabSheet id="tabSheet" width="100%"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    initTabSheet();
}

protected void initTabSheet() {
    tabSheet.add(createProfileTab(), new Span("Profile tab content"));
    tabSheet.add(createNotificationsTab(), new Span("Notifications tab content"));
    tabSheet.add(createSettingsTab(), new Span("Settings tab content"));
}
// theme-only:lumo
@Subscribe("iconControlCheckbox")
protected void onIconControlCheckboxValueChane(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    if (event.getValue()) {
        tabSheet.getChildren().forEach(tab -> ((Tab) tab).addThemeVariants(TabVariant.LUMO_ICON_ON_TOP));
    } else {
        tabSheet.getChildren().forEach(tab -> tab.getElement().getThemeList().clear());
    }
}
// theme-only:lumo:end

protected Tab createProfileTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.USER.create(), new Text("Profile"));

    return tab;
}

protected Tab createNotificationsTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.BELL.create(), new Text("Notifications"));

    return tab;
}

protected Tab createSettingsTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.COG.create(), new Text("Settings"));

    return tab;
}

徽标

在线示例

标签页标题中的徽标可以显示条目数量、通知或其他简明的状态信息。下面的示例使用文本和包含计数的徽标创建标题：

XML
<layout classNames="tab-sheet-badges">
    <tabSheet id="tabSheet" width="100%"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    initTabSheet();
}

protected void initTabSheet() {
    tabSheet.add(createIssueTab(), new Span("Issue tab content"));
    tabSheet.add(createFeatureTab(), new Span("Feature tab content"));
    tabSheet.add(createBugTab(), new Span("Bug tab content"));
}

protected Tab createIssueTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Issues"), createBadge(15));

    return tab;
}

protected Tab createFeatureTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Features"), createBadge(132, BadgeVariant.SUCCESS));

    return tab;
}

protected Tab createBugTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Bugs"), createBadge(32, BadgeVariant.ERROR));

    return tab;
}

protected Badge createBadge(int value, BadgeVariant... variants) {
    Badge badge = new Badge();
    badge.setNumber(value);
    badge.addThemeVariants(BadgeVariant.SMALL);
    badge.addThemeVariants(variants);
    badge.addClassName("tab-badge");

    return badge;
}

延迟加载

在线示例

延迟加载的标签页只有在被选择时才会创建其内容，从而减少初始实例化的组件数量。示例通过编程方式添加 LazyComponent 实例，并在标签页切换事件中，在一个信息字段显示何时创建的标签页内容。

如果项目安装了 UI 约束 扩展组件，当选择某个标签页时，该组件会在延迟加载的内容中应用 UI 组件策略。有关详细信息和配置，请参见 UI 约束：Tab 选择。
XML
<layout>
    <tabSheet id="tabSheet" width="100%" themeNames="bordered">
        <tab id="tab1" label="Tab 1">
            <vbox>
                <span text="Span 1"/>
                <textField label="TextField 1"/>
                <button text="Button 1"/>
            </vbox>
        </tab>
    </tabSheet>
    <span text="Created content:"/>
    <span id="spanInfo"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;
@ViewComponent
protected Span spanInfo;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    tabSheet.add("LazyTab 1", new LazyComponent(this::getLazyTabContent));
    tabSheet.add("LazyTab 2", new LazyComponent(this::getLazyTabContent));

    checkComponents();
    tabSheet.addSelectedChangeListener(e -> checkComponents());
}

protected Component getLazyTabContent() {
    VerticalLayout content = uiComponents.create(VerticalLayout.class);

    Span info = uiComponents.create(Span.class);
    info.setText("Lazy Span");

    TypedTextField<String> textField = uiComponents.create(TypedTextField.class);
    textField.setLabel("Lazy textField");

    JmixButton button = uiComponents.create(JmixButton.class);
    button.setText("Lazy button");

    content.add(info, textField, button);
    return content;
}

protected void checkComponents() {
    StringBuilder sb = new StringBuilder("Tab 1 = ");
    List<Component> tab1Content = tabSheet.getContentByTab(tabSheet.getTabAt(0)).getChildren().toList();
    sb.append(tab1Content.isEmpty() ? "null" : "true");

    sb.append(", LazyTab 1 = ");
    List<Component> tab2Content = tabSheet.getContentByTab(tabSheet.getTabAt(1)).getChildren().toList();
    sb.append(tab2Content.isEmpty() ? "null" : "true");

    sb.append(", LazyTab 2 = ");
    List<Component> tab3Content = tabSheet.getContentByTab(tabSheet.getTabAt(2)).getChildren().toList();
    sb.append(tab3Content.isEmpty() ? "null" : "true");

    spanInfo.setText(sb.toString());
}

样式版本

在线示例

使用 themeNames 设置组件的样式。

样式 描述 支持的主题

icon-on-top

应用于独立的 tab 元素。在 tab 设置 themeNames="icon-on-top" 可以将图标放置在标签文本之上

Lumo

centered

将标签页放置在容器或视图的中间

Lumo

small

使用小尺寸标签页

Aura, Lumo

minimal

仅展示标签页的标签，不显示其他可视化元素

Lumo

hide-scroll-buttons

隐藏用于滚动标签页的按钮

Aura, Lumo

equal-width-tabs

每个标签页调整为等宽，并禁用滚动按钮

Lumo

bordered

为标签页和内容添加边框

Lumo

no-padding

移除内容区域的默认内边距

Aura, Lumo

no-border

移除 tab 的边框

Aura

XML 属性

通用属性 对 tabSheet 和 tab 都是一样的配置。下面是 tab 的特殊属性：

名称 描述 默认值

lazy

延迟创建标签页内容，直到选中标签页。

false

事件和处理器

下面是 tabSheet 或 tab 的特殊事件和处理器：

名称 描述

SelectedChangeEvent

当标签页切换时触发。

下面是 tabSheet 或 tab 支持的其他通用事件：

AttachEvent - DetachEvent

XML 内部元素

一个 tabSheet 可以包含多个 tab 元素。每个 tab 可以有一个内容组件和一个 tooltip 内部元素。

参考