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

Question

Как создать VerticalMenu или Боковая панель в Ваадине? Есть ли какой-либо конкретный компонент или я делаю программно и используя CSS?

Я хотел бы создать что-то вроде Vaadin Demo:

Я использую новую Valo тему.

Answer 1

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

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

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

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

Вы можете просмотреть методы моделирования (в Sass) для различных точек зрения 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. Вам просто нужно использовать соответствующие стили для ваших компонентов и макетов.

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

ValoThemeUI.java - Оформление печатного Вало меню на странице

ValoMenuLayout.java - Оформление печатных компоненты внутри Вали меню