Créer une barre latérale ou un menu vertical à Vaadin

eh bien, pour être en mesure de créer un réactif de comportement de votre application, vous devez utiliser le CSS. Comme Zigac mentionné Vaadin a certains styles déjà écrit pour certains composants (comme notre menu ici) mais vous auriez envie de l'appliquer plus par la suite...

découvrez la nouvelle Tableau de bord de démonstration avec la Valo thème et de la réactivité! C'est un plus complet exemple d'éléments de style et met en œuvre la même logique que la Valo Thème de Démonstration. Vous pouvez afficher le code source ici

Essentiellement, ce qu'il fait est de créer un menu comme un CustomComponent et d'une zone de contenu comme un CssLayout. Chaque fois qu'un composant est cliqué dans le menu, il fera appel à la vue correspondante dans la zone de contenu de la MainView

Par exemple l'un des points de vue est la DashboardView qui est le premier point de vue de l'utilisateur voit. C'est un réactif VerticalLayout réactive compnents.

Vous pouvez afficher les techniques de coiffage (Sass) pour les différents points de vue ici

Voici quelques code sinppets:

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

et ici est la propriété styleName "tableau de bord-affichage" dans la feuille de style

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