想要更改背景顏色（或將粗體文本置於當前的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> 

不過，我運行一個行家清潔套裝，以確保我建的主題。

編輯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

此解決方案正在工作。但是，我認爲這不是最好的。所以，請提供一個更好的答案。

我使用會話保存菜單級別：

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; 
} 

Answer 2

從Vaadin 8 Docs：

...提防菜單項選擇的風格，那就是， v-menubar-menuitem-selected，被保留鼠標懸停指示。

試試這個：

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

和代碼：

menuBar.addStyleName("myTheme"); 

還記得從你的瀏覽器清除緩存。