vaadin14 - 如何将vaadin的标签标记放在顶部？

Question

如何让蓝色下划线出现在文本（选项卡名称）的顶部而不是底部？

我正在使用 Vaadin 14

Answer 1

创建frontend/styles/tab-theme.css包含内容的文件

:host::before,
 :host::after {
    top: 0;
}

使用 将其导入您的视图中@CssImport(value = "./styles/tab-theme.css", themeFor = "vaadin-tab")，例如：

@Route
@CssImport(value = "./styles/tab-theme.css", themeFor = "vaadin-tab")
public class MainView extends VerticalLayout {

    public MainView() {
        Tabs tabs = new Tabs();
        tabs.add(new Tab("Tab1"));
        tabs.add(new Tab("Tab2"));
        tabs.add(new Tab("Tab3"));
        add(tabs);
    }

}

就是这样。

使用 Vaadin 14.2.1 测试