Einstellung Stil für Vaadin Menü Popup in einer Ansicht ohne Auswirkungen auf andere

Question

Ich habe ein Problem mit der Gestaltung von Vaadin Menu.Ich möchte verschiedene Stil von Menü Popup auf einer anderen Seite haben.Das heißt, wenn Sie den Stil in einer Ansicht, es sollte nicht beeinflussen andere Menüleiste Pop-ups in anderen Ansicht. Ist es trotzdem, dass ich das erreichen kann? Ich kann dynamische CSS-Injection oder JavaScript verwenden, um zu erreichen, aber ich möchte wissen, ob es andere Möglichkeiten gibt, dies mit CSS und Vaadin API zu erreichen.

Jede Hilfe wird geschätzt.

Answer 1

Dies sollte ziemlich einfach zu konfigurieren sein mit themes und Hinzufügen einer custom style to your menu bar (scrollen, um fast das Ende), zB menu.addStyleName("red");. Das folgende Beispiel ist sehr einfach, aber Sie werden die Idee bekommen.

CSS-Konfiguration in Ihr Thema:

.red { 
    background-color: red; 
} 

Beispielcode:

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

Ergebnis:

---

Update

Das Styling der v-menubar-popup ist schwierig, da dieses Element jedes Mal erstellt wird, wenn ein Menü ausgeblendet wird, aber kein benutzerdefinierter Stil angehängt wird. Unter diesen Umständen könnten Sie die folgende Problemumgehung, beginnend mit der Probe oben verwenden:

1) vollständig den primären Stil-Menü ändern:

menu.setPrimaryStyleName("custom-menubar"); 

2) In Ihrem Thema einen neuen Stil schaffen die menu-bar mixin mit und fügen eine benutzerdefinierten Stil für das Popup auch:

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

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

3) es kann nicht perfekt sein, und Sie können die Höhe zwicken haben je nach den Elementen jedes Menü hat, weil es nicht ist länger automatisch berechnet, aber das Ergebnis sieht vielversprechend aus