[英]How can I change the background color of the navigation bar - Vaadin
我在 Vaadin 中使用AppLayout
類。 我想知道如何更改導航欄中的背景顏色。
我知道如何在 Vaadin 中添加 CSS 樣式,但是我無法訪問導航類。
這是我的代碼。 如您所見,我總是使用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);
}
}
從樣式部分,您可以看到有一個navbar
部分。 您可以使用它來設置 AppLayout 的導航欄的樣式
如果navbarStyles.css
有:
[part~="navbar"]{
background-color: red;
}
並使用: @CssImport(value= "./styles/navbarStyles.css", themeFor = "vaadin-app-layout")
導入視圖,背景顏色已更改
使用theme
區分其他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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.