Как я могу изменить цвет фона панели навигации - Ваадин - PullRequest
Новая
       6

Как я могу изменить цвет фона панели навигации - Ваадин

1 голос
/ 14 января 2020

Я использую класс AppLayout в Vaadin. Интересно, как я могу изменить цвет фона в панели навигации.

Я знаю, как добавить стиль CSS в Vaadin, но у меня проблемы с доступом к классу навигации.

Вот мой код Как видите, я всегда использую метод setClassName. Но где я могу найти этот метод для панели навигации? 

@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
@PWA(name = "Hemsida", shortName = "Hem")
@Route("")
@CssImport("./CSS/MainView.css")
public class MainView extends AppLayout {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public MainView() {

        // Image bar
        Image barImage = new Image("img/cropped-logo_liggande_rod.png", "Spektrakon Logo");
        barImage.setClassName("barImage");

        // Drawer
        DrawerToggle drawerToggle = new DrawerToggle();
        drawerToggle.setClassName("drawerToggle");


        addToNavbar(barImage, drawerToggle);


        Tabs tabs = new Tabs(new Tab("Hem"), new Tab("Produktutveckling"), new Tab("Industriell Design"), new Tab("System"), new Tab("Kvalitet"), new Tab("Om oss"), new Tab("Intrenet"));
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        addToDrawer(tabs);
    }

}

1 Ответ

1 голос
/ 14 января 2020

Из Styling part вы можете видеть, что есть navbar part. Вы можете использовать его для стилизации навигационной панели AppLayout

, если navbarStyles.css имеет: 

[part~="navbar"]{
    background-color: red;
}

И импортируется в представление с помощью: @CssImport(value= "./styles/navbarStyles.css", themeFor = "vaadin-app-layout"), цвет фона изменяется

Полный пример использования theme для отличия guish от других AppLayout * 

@Route("")
@CssImport(value= "./styles/navbarStyles.css", themeFor = "vaadin-app-layout")
public class AppLayoutPictures extends AppLayout {

    public AppLayoutPictures(){
        setPrimarySection(AppLayout.Section.DRAWER);
        Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
        img.setHeight("44px");
        addToNavbar(new DrawerToggle(), img);
        Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        addToDrawer(tabs);
       //Set to AppLayout, propageted to `parts`
        getElement().setAttribute("theme","appLayout");
    }

navbarStyles.css

:host([theme~="appLayout"]) [part~="navbar"]{
    background-color: orange;
}

Результат : enter image description here

...