Как поставить маркер вкладки ваадина вверху?

Как сделать так, чтобы синее подчеркивание отображалось вверху текста (название вкладки), а не внизу? введите здесь описание изображения

Я использую Vaadin 14


person ust3000    schedule 17.05.2020    source источник


Ответы (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

person nemojmenervirat    schedule 12.06.2020