tabs 选项卡
基本用法
默认情况下，选项卡在水平方向依次排列。选项卡通常位于关联内容区域的顶部或底部。
下面的示例演示了 tabs 的基本功能。
XML 代码
<tabs id="tabs">
<tab id="tab1" label="Tab One"/>
<tab id="tab2" label="Tab Two"/>
</tabs>示例中，组件包含两个内部的 tab 元素。若要更新与所选选项卡关联的内容，需要定义 SelectedChangeEvent 事件的处理方法。选择选项卡时，将触发此事件，从而可以更新显示的内容。
标签
选项卡内部可以使用几乎任何组件。可以编写易分辨的选项卡标签：
XML 代码
<tabs>
<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 属性设置组件样式。
| 样式 | 描述 | 支持的主题 |
|---|---|---|
|
作用于单个 |
Lumo |
|
在容器内居中标签页。 |
Lumo |
|
使标签页更小。 |
Aura, Lumo |
|
弱化视觉样式，仅突出显示标签文本。 |
Lumo |
|
隐藏用于导航溢出标签页的滚动按钮。 |
Aura, Lumo |
|
为所有标签页分配等宽并禁用滚动。 |
Lumo |
XML 属性
id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - orientation - themeNames - visible - width
事件和处理器
|
在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。 |
SelectedChangeEvent
当用户选择其他选项卡时触发 com.vaadin.flow.component.tabs.Tabs.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 内部元素
|
如需通过 Jmix Studio 添加元素，请在 XML 或 Jmix UI 结构面板中选中该组件，然后点击组件属性面板中的 Add 按钮。 |
tab
单独的选项卡通过 tab 元素定义。
tab XML 属性
id - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - flexGrow - label - themeNames - visible
tab 事件和处理器
