在Vaadin

Question

创建栏或垂直菜单我如何可以创建一个Vaadin VerticalMenu或边栏？是否有任何特定的组件或者我编程和使用CSS？

我想喜欢Vaadin Demo创造的东西：

我使用的是新Valo的主题。

Answer 1

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

检查出新的Dashboard demo与Valo主题和响应！这是一个更全面的样式组件示例，并且实现了与Valo Theme Demo相同的逻辑。您可以查看源代码here

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

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

您可以为不同的看法here

这里有一些代码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); 
... 

，这里是在样式表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); 
    } 
    } 
... 

Answer 2

对于这个确切的设计，你不需要CSS编码，所有的样式都提供了编译的Valo主题。您只需在组件和布局上使用适当的样式。

为精确（Vaadin演示）实现GIT链接：

ValoThemeUI.java - 网页

ValoMenuLayout.java上布点VALO菜单 - VALO菜单内布点组件