如何在Vaadin Flow的Tabs组件中添加视觉分隔符？

AI 小北

2026-7-28

在Vaadin Flow的Tabs组件标签间添加视觉分隔符的解决方案

你无法直接向Tabs组件添加Hr元素，因为Tabs仅接受Tab类型的子组件，这是组件API的限制。不过可以通过以下两种方式实现视觉分隔效果：

方案一：CSS伪元素/边框实现（推荐）

通过自定义CSS给Tab元素添加分隔线，无需额外组件，更符合Vaadin组件设计规范。

给Tabs组件添加自定义类名：

Tabs tabs = new Tabs();
tabs.addClassName("vertical-tabs-with-dividers"); // 添加自定义类
// 后续添加Tab的逻辑不变
Tab jobsTab = VaadinUtils.createVerticalTab(VaadinIcon.WORKPLACE, getTranslation("jobs.catalog"), AllJobsView.class, null);
tabs.add(jobsTab);

添加全局CSS样式（可放在frontend/styles/shared-styles.css中）：

/* 针对纵向Tabs的分隔线 */
.vertical-tabs-with-dividers vaadin-tab:not(:first-child) {
  border-top: 1px solid var(--lumo-contrast-10pct);
  margin-top: var(--lumo-space-xs);
  padding-top: var(--lumo-space-xs);
}

该样式会给除第一个Tab外的所有Tab添加顶部边框，同时调整边距和内边距，匹配你期望的分隔效果。

方案二：使用空Tab作为分隔符

如果需要手动控制分隔位置，可以创建无内容的Tab，通过样式将其变成分隔线：

创建分隔符Tab并添加到Tabs中：

Tabs tabs = new Tabs();
Tab jobsTab = VaadinUtils.createVerticalTab(VaadinIcon.WORKPLACE, getTranslation("jobs.catalog"), AllJobsView.class, null);
tabs.add(jobsTab);

// 创建分隔符Tab
Tab divider = new Tab();
divider.addClassName("tab-divider");
tabs.add(divider);

// 添加下一个Tab
Tab anotherTab = VaadinUtils.createVerticalTab(VaadinIcon.USER, getTranslation("users"), UsersView.class, null);
tabs.add(anotherTab);

对应的CSS样式：

.tab-divider {
  height: 1px;
  background-color: var(--lumo-contrast-10pct);
  padding: 0;
  margin: var(--lumo-space-xs) 0;
  cursor: default; /* 避免分隔符被点击选中 */
}