Создать боковую панель или вертикальное меню в Vaadin
Как я могу создать VerticalMenu или боковая панель в фреймворк Vaadin? Есть ли какой-то конкретный компонент или я делаю программно и с помощью CSS?
Я хотел бы создать что-то вроде Vaadin Demo:
Я использую новую тему Valo.
2 ответов
ну, чтобы иметь возможность создавать отзывчивое поведение для вашего приложения, вам придется использовать CSS. Как упоминал Зигак, у Vaadin есть некоторые стили, уже написанные для некоторых компонентов (например, наше меню здесь), но вы хотите применить больше в конечном итоге...
проверьте новый Dashboard demo С темой Valo и отзывчивостью! Это более полный пример компонентов стиля и реализует ту же логику, что и демонстрация темы Valo. Можно просмотреть исходный код здесь
в основном то, что он делает, это создать меню как CustomComponent и область содержимого как CssLayout. Всякий раз, когда компонент нажат в меню, он вызовет соответствующий вид в области содержимого MainView
например, одним из представлений является DashboardView это первый вид, который видит пользователь. Это отзывчивый VerticalLayout с отзывчивыми compnents на нем.
вы можете просмотр методов укладки (в Sass) для различных видов здесь
вот некоторые синппеты кода:
представлении 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);
...
и вот имя стиля "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);
}
}
...
для этого точного дизайна вам не нужно кодирование CSS, все стили снабжены скомпилированной темой Valo. Вам просто нужно использовать соответствующие стили для ваших компонентов и макетов.
ссылки GIT для этой точной (Vaadin Demo) реализации:
ValoThemeUI.java - layouting valo-меню на странице
ValoMenuLayout.java - layouting компоненты внутри valo-menu