Создание боковой панели или вертикального меню в Ваадине

Ответ 1

чтобы иметь возможность создавать отзывчивое поведение для вашего приложения, вам нужно будет использовать CSS. Как сказал Зигак, у Ваадина есть некоторые стили, уже написанные для некоторых компонентов (например, наше меню здесь), но вы хотели бы применить в конечном итоге...

ознакомьтесь с новой демонстрацией Dashboard с темой Valo и отзывчивостью! Это более исчерпывающий пример компоновки стилей и реализует ту же логику, что и демо-версия Valo Theme. Вы можете просмотреть исходный код здесь

В основном, это создание menu в качестве CustomComponent и области содержимого как CssLayout. Всякий раз, когда компонент кликается в меню, он вызывает соответствующее представление в области содержимого MainView

Например, одним из видов является DashboardView, который является первым видом, который видит пользователь. Это отзывчивый VerticalLayout с отзывчивыми комплиментами на нем.

Вы можете просмотреть методы стилизации (в Sass) для разных представлений здесь

Вот несколько кодовых сипппетов:

MainView.java

public class MainView extends HorizontalLayout {

public MainView() {
    //This is the root of teh application it
    //extends a HorizontalLayout
    setSizeFull();
    addStyleName("mainview");

    //here we add the Menu component
    addComponent(new DashboardMenu());

    //add the content area and style
    ComponentContainer content = new CssLayout();
    content.addStyleName("view-content");
    content.setSizeFull();
    addComponent(content);

    setExpandRatio(content, 1.0f);

    new DashboardNavigator(content);
}
}

DashboardMenu.java

public DashboardMenu() {
    addStyleName("valo-menu");
    setSizeUndefined();
    DashboardEventBus.register(this);

    //add components to the menu (buttons, images..etc)
    setCompositionRoot(buildContent());
}

DashboardView.java

public DashboardView() {
    addStyleName(ValoTheme.PANEL_BORDERLESS);
    setSizeFull();
    DashboardEventBus.register(this);

    root = new VerticalLayout();
    root.setSizeFull();
    root.setMargin(true);
    root.addStyleName("dashboard-view");
    setContent(root);

    //this allows you to use responsive styles
    //on the root element
    Responsive.makeResponsive(root);

    //build your dashboard view
    root.addComponent(buildHeader());

    root.addComponent(buildSparklines());

    Component content = buildContent();
    root.addComponent(content);

    //set the content area position on screen
    root.setExpandRatio(content, 1);
...

и вот styleName "панель-вид" в таблице стилей

dashboardview.scss

@mixin dashboard-dashboard-view {

.dashboard-view.dashboard-view {
//Styles for all devices
padding: $view-padding;
overflow: visible;

.sparks {
  @include valo-panel-style;
  margin-bottom: round($view-padding / 3);

  //styles for a tablet
  @include width-range($max: 680px) {
    .spark {
      width: 50%;
    }
    .spark:nth-child(2n+1) {
      border-left: none;
    }
    .spark:nth-child(n+3) {
      border-top: valo-border($strength: 0.3);
    }
  }
...

Ответ 2

Для этого точного дизайна вам не нужно кодирование CSS, все стили предоставлены скомпилированной темой Valo. Вам просто нужно использовать соответствующие стили для ваших компонентов и макетов.

GIT для этой точной (Vaadin Demo) реализации:

ValoThemeUI.java - макет вало-меню на странице

ValoMenuLayout.java - компоновка компонентов внутри valo-menu