在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菜單內布點組件