如何在Vaadin中创建一个VerticalMenu或Sidebar？有没有特定的组件,或者我是否在编程中使用CSS？
我想创建像Vaadin Demo这样的东西：
我正在使用新的Valo主题.
解决方法
为了能够为您的应用程序创建一个响应行为,您必须使用CSS.就像Zigac所说,Vaadin有一些风格已经写在一些组件上(比如我们的菜单),但是你最好还是应用更多…
查看新的Dashboard demo与Valo主题和响应！这是一个更全面的样式组件示例,并实现与Valo主题演示相同的逻辑.您可以查看源代码here
它基本上是创建一个menu作为一个CustomComponent和一个内容区域作为一个CssLayout.每当在菜单中单击组件时,它将调用MainView的内容区域中的相应视图
例如,其中一个视图是DashboardView,它是用户看到的第一个视图.这是一个响应性的VerticalLayout与响应的组件.
您可以查看不同视图here的样式技术(在Sass中)
这里有一些代码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);
...
这里是样式表中的stylesName“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);
}
}
...
