Vaadin Menuの設定スタイル他の設定に影響を与えることなく1つのビューでポップアップ

Question

私はVaadin Menuのスタイリングに問題があります。のメニューポップアップの異なるスタイルを使用したいと考えています。 は他のビューの他のメニューバーのポップアップに影響しません。私はそれを達成できますか？動的なCSSインジェクションやJavaScriptを使用して達成することができますが、CSSとVaadin APIを使用してこれを達成する他の方法があるかどうかを知りたいと思います。

何か助けていただければ幸いです。

Answer 1

themesを使用し、custom style to your menu bar（ほとんど最後までスクロール）を追加すると、これはかなり簡単に構成できるはずです（例：​​）。下のサンプルは非常に基本的ですが、あなたはそのアイデアを得るでしょう。あなたのテーマで

CSSの設定：

.red { 
    background-color: red; 
} 

サンプルコード：

public class MenuBarComponent extends VerticalLayout { 
    public MenuBarComponent() { 
     MenuBar menu = new MenuBar(); 

     // add the custom style 
     menu.addStyleName("red"); 

     // A top-level menu item that opens a submenu 
     MenuBar.MenuItem drinks = menu.addItem("Beverages", null, null); 

     // Submenu item with a sub-submenu 
     MenuBar.MenuItem hots = drinks.addItem("Hot", null, null); 
     hots.addItem("Tea", null); 
     hots.addItem("Coffee", null); 

     // Another submenu item with a sub-submenu 
     MenuBar.MenuItem colds = drinks.addItem("Cold", null, null); 
     colds.addItem("Milk", null); 
     colds.addItem("Weissbier", null); 

     // Another top-level item 
     MenuBar.MenuItem snacks = menu.addItem("Snacks", null, null); 
     snacks.addItem("Weisswurst", null); 
     snacks.addItem("Bratwurst", null); 
     snacks.addItem("Currywurst", null); 

     // Yet another top-level item 
     MenuBar.MenuItem servs = menu.addItem("Services", null, null); 
     servs.addItem("Car Service", null); 

     addComponent(menu); 
    } 
} 

結果：

---

更新

v-menubar-popupのスタイリングは、メニューがポップアウトされるたびにカスタムスタイルが追加されるたびに作成されるため、難しいです。状況の下で、あなたが上記のサンプルから始まる次の回避策を使用することができます。完全にメニューの基本スタイルを変更）

1：

menu.setPrimaryStyleName("custom-menubar"); 

2）あなたのテーマでmenu-bar mixinを使用して新しいスタイルを作成し、追加しますカスタムポップアップのスタイルだけでなく：

@include valo-menubar("custom-menubar", false); 

.custom-menubar-popup { 
    background-color: red; 
    height: 90%; // adjust as needed 
} 

3）それはだから、それは完璧ではないかもしれない、あなたは、それぞれのメニューがあり項目に応じて高さを微調整する必要があります自動的に計算時間が長くなりますが、結果は有望です。