java - 如何更改导航栏的背景颜色 - Vaadin
问题描述
我正在使用AppLayout
Vaadin 中的课程。我想知道如何更改导航栏中的背景颜色。
我知道如何在 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;
}
推荐阅读
- android - 间歇性 Android 应用程序崩溃 java.lang.UnsatisfiedLinkError: dlopen failed
- javascript - 我在使用 mapStateToProps 时遇到问题
- python - 无法遍历列表以执行并发 api 请求
- c++ - {fmt} 在 SQL 中使用编译时格式字符串
- django - 尝试使用 redis-cli 获取 Celery 队列的大小时遇到问题(对于 Django 应用程序)
- jpa - locust 测试 20+ 用户时无法获取 JDBC 连接
- visual-studio-code - 在 VSCode 中禁用多个游标
- python - Flask Post Data 额外大括号
- javascript - 创建在特定浏览器中打开的动态超链接
- laravel - 不知道如何在 Laravel 中设置这些数据库表