tabs 选项卡

tabs 支持用户切换想关联的内容区域，但组件本身不包含内容区域。

XML 元素

tabs

Java 类

Tabs

基本用法

在线示例

默认情况下，选项卡在水平方向依次排列。选项卡通常位于关联内容区域的顶部或底部。

下面的示例演示了 tabs 的基本功能。

<tabs width="100%">
    <tab id="issueTab" label="Issues"/>
    <tab id="featureTab" label="Features"/>
    <tab id="bugTab" label="Bugs"/>
</tabs>

示例中，组件包含两个内部的 tab 元素。若要更新与所选选项卡关联的内容，需要定义 SelectedChangeEvent 事件的处理方法。选择选项卡时，将触发此事件，从而可以更新显示的内容。

方向

在线示例

虽然选项卡默认是水平方向排列的，但在某些场景中，也可以使用垂直排列。例如，对于数量较多的选项卡，垂直排列可能为标签文本展示提供更多的空间。

通过 orientation 修改 tabs 的排列方向。

XML
<checkbox id="orientationCheckbox" label="Vertical"/>
<tabs id="tabs" width="100%">
    <tab id="profileTab">
        <icon icon="USER"/>
        <span text="Profile"/>
    </tab>
    <tab id="notificationsTab">
        <icon icon="BELL"/>
        <span text="Notifications"/>
    </tab>
    <tab id="settingsTab">
        <icon icon="COG"/>
        <span text="Settings"/>
    </tab>
</tabs>
Java
@ViewComponent
protected Tabs tabs;

@Subscribe("orientationCheckbox")
protected void onOrientationCheckboxValueChane(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    tabs.setOrientation(event.getValue() ? Tabs.Orientation.VERTICAL : Tabs.Orientation.HORIZONTAL);
}

状态

在线示例

tab 可以选择、不选择或禁用：

通过这些状态开发者可以确定哪个选项卡当前处于活动状态，以及哪些选项卡可能暂时不可用或被禁用。

XML
<tabs id="tabs" width="100%">
    <tab id="tab1" label="Selected"/>
    <tab id="tab2" label="Unselected"/>
    <tab id="tab3" label="Disabled" enabled="false"/>
</tabs>
Java
@Subscribe("tabs")
protected void onTabsSelectChangeEvent(Tabs.SelectedChangeEvent event) {
    event.getPreviousTab().setLabel("Unselected");
    event.getSelectedTab().setLabel("Selected");
}

标签

在线示例

选项卡内部可以使用几乎任何组件编写易分辨的选项卡标签：

<tabs id="tabs" width="100%">
    <tab id="profileTab">
        <icon icon="USER"/>
        <span text="Profile"/>
    </tab>
    <tab id="notificationsTab">
        <icon icon="BELL"/>
        <span text="Notifications"/>
    </tab>
    <tab id="settingsTab">
        <icon icon="COG"/>
        <span text="Settings"/>
    </tab>
</tabs>

样式版本

在线示例

使用 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

XML 属性

下面是 tabs 的特殊属性：

名称 描述 默认值

orientation

定义选项卡的方向。

—

下面是 tabs 支持的其他通用属性：

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

事件和处理器

下面是 tabs 的特殊事件和处理器：

名称 描述

SelectedChangeEvent

com.vaadin.flow.component.tabs.Tabs.SelectedChangeEvent 当用户选择其他选项卡时触发。

下面是 tabs 支持的其他通用事件：

AttachEvent - DetachEvent

XML 内部元素

如需通过 Jmix Studio 添加元素，请在 XML 或 Jmix UI 结构面板中选中该组件，然后点击组件属性面板中的 Add 按钮。

tab

单独的选项卡通过 tab 元素定义。

tab XML 属性

id - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - flexGrow - label - themeNames - visible

tab 事件和处理器

AttachEvent - DetachEvent

参考