Стиль настройки для меню Vaadin Popup в одном представлении, не влияя на другие

Question

У меня проблема с дизайном меню Vaadin. Я хочу иметь другой стиль меню popup на разных страницах. Это означает, что если задать стиль в одном представлении, он не должен влиять на другие всплывающие окна меню в другом виде. Есть ли в этом случае я могу достичь этого? Я могу использовать динамический ввод CSS или JavaScript для достижения, но я хочу знать, есть ли другой способ достичь этого с помощью CSS и Vaadin API.

Любая помощь приветствуется.

Answer 1

Это довольно легко настроить с помощью themes и добавить custom style to your menu bar (прокрутите до конца), например menu.addStyleName("red");. Пример ниже очень прост, но вы получите эту идею.

конфигурации 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) это не может быть совершенным, и вы, возможно, придется настроить высоту в зависимости от элементов каждого меню имеет, потому что нет более длинный рассчитанный автоматически, но результат выглядит перспективным