想要将背景颜色（或将文本加粗）更改为当前 VAADIN 菜单栏项目选择

Question

我想在我的菜单项被选中时使用不同的颜色。我的菜单是：

为此，代码是：

  /**
     * Create a Vertical Menu with the Home page and Actions page
     */
    public MenuBar createMenu() {
        MenuBar menuBar = new MenuBar();
        menuBar.addItem(StringConstants.MENU_HOMEPAGE_LABEL, VaadinIcons.HOME, createCommandHomepage());
        menuBar.addItem(StringConstants.MENU_ACTIONS_LABEL, VaadinIcons.TABLE, createCommandActions());
        menuBar.addItem(StringConstants.MENU_LOG_OUT_LABEL, VaadinIcons.SIGN_OUT, createCommandLogOut());
        return menuBar;
    }

    /**
     * Create the command when the Home page has been selected in the menu
     */
    private Command createCommandHomepage() {
        return new Command() {
            @Override
            public void menuSelected(final MenuBar.MenuItem selectedItem) {
                selectedItem.setStyleName("caption");
                UI.getCurrent().getNavigator().navigateTo(StringConstants.HOMEPAGE_VIEW_NAME);
            }
        };
    }
    /**
     * Same for the Action and Log out - it's not important to show the code here
     */

所以我尝试将当前选择加粗（我也尝试更改背景）。

所以我的 scss 代码是：

.v-menubar-menuitem-selected{
          font-weight: bold;
    }

    .caption {
        font-weight: bold;
    }

这根本不起作用。然而:

.v-menubar-menuitem-caption{
          font-weight: bold;
    }

正常，但它会将所有标题都加粗，而不仅仅是当前选择。

我不知道我做错了什么。

编辑：我编译了 vaadin 主题：

        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>8.0.6</version>
            <executions>
                <execution>
                    <goals>
                        <goal>update-theme</goal>
                        <goal>update-widgetset</goal>
                        <goal>compile</goal>
                        <goal>compile-theme</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

但是，我运行一个 maven clean 包来确保我构建了主题。

编辑 2：来自 pom.xml 的 Vaadin 版本：

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-bom</artifactId>
    <version>8.0.4</version>
    <type>pom</type>
    <scope>import</scope>
</dependency>

Answer 1

来自Vaadin 8 Docs：

...beware that the selected style for menu items, that is, v-menubar-menuitem-selected, is reserved for mouse-hover indication.

试试这个：

.myTheme .v-menubar-menuitem-highlight {
    background: #000040;
}

在代码中：

menuBar.addStyleName("myTheme");

另外记得清除浏览器的缓存。

Answer 2

此解决方案有效。但是，我认为 它不是更好的。 所以，请提供一个更好的答案。

我使用session保存菜单层级：

String menuTabSelected =(String)VaadinSession.getCurrent().getAttribute("menuState");
MenuBar barmenu = new MenuBar();
barmenu.addStyleName("mybarmenu");
layout.addComponent(barmenu);

String homepageStyle = menuTabSelected == null || menuTabSelected.equals(StringConstants.MENU_HOMEPAGE_LABEL) ? "highlight" : null;

barmenu.addItem(StringConstants.MENU_HOMEPAGE_LABEL, VaadinIcons.HOME, createCommandHomepage()).setStyleName(homepageStyle);


private Command createCommandHomepage() {
    return new Command() {
        @Override
        public void menuSelected(final MenuItem selectedItem) {

            VaadinSession.getCurrent().setAttribute("menuState", selectedItem.getText());

            UI.getCurrent().getNavigator().navigateTo(StringConstants.HOMEPAGE_VIEW_NAME);
        }
    };
}

在 mytheme.scss 中：

.mybarmenu .v-menubar-menuitem-highlight {
    background: #dedede;
    font-weight: bold;
}

想要将背景颜色（或将文本加粗）更改为当前 VAADIN 菜单栏项目选择

Want to change the backgroung color (or put the text on bold) to the current VAADIN menu bar item selection

css

java

vaadin8