在 Vaadin 中创建侧边栏或垂直菜单答案

【问题标题】：Create Sidebar or Vertical Menu in Vaadin在 Vaadin 中创建侧边栏或垂直菜单
【发布时间】：2014-12-17 16:06:00
【问题描述】：

如何在 Vaadin 中创建 VerticalMenu 或 Sidebar？是否有任何特定组件或我是否以编程方式使用 CSS？

我想创建类似Vaadin Demo:

我正在使用新的 Valo 主题。

【问题讨论】：

标签： css sass vaadin vaadin7 vaadin-valo-theme

【解决方案1】：

要能够为您的应用程序创建响应式行为，您必须使用 CSS。就像 Zigac 提到的 Vaadin 已经为某些组件编写了一些样式（例如我们这里的菜单），但您最终想应用更多...

查看带有 Valo 主题和响应能力的新 Dashboard demo！这是一个更全面的样式组件示例，并实现了与 Valo 主题演示相同的逻辑。可以查看源代码here

基本上，它所做的是将menu 创建为 CustomComponent 并将内容区域创建为 CssLayout。每当在菜单中单击一个组件时，它将调用MainView内容区域中的相应视图

例如，其中一个视图是DashboardView，这是用户看到的第一个视图。这是一个带有响应组件的响应式 VerticalLayout。

您可以查看不同视图的样式技术（在 Sass 中）here

以下是一些代码片段：

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 "dashboard-view"

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 主题。您只需在组件和布局上使用适当的样式即可。

该确切（Vaadin 演示）实现的 GIT 链接：

ValoThemeUI.java - 在页面上布局 valo-menu

ValoMenuLayout.java - 在 valo-menu 中布局组件

【讨论】：

github.com/vaadin/valo-demo 上似乎有一条警告，该示例已被弃用。