Vaadin-响应式色谱柱 [英] Vaadin - Responsive Columns
问题描述
我是使用Vaadin的新手,并且一直在尝试找出如何使全屏显示2个组件并排放置,但是在移动屏幕时又可以使两个组件并排堆叠.
I'm new to using Vaadin and have been trying to work out how I can make 2 Components be side by side when at full screen, but then stack on top of each other when the screen is mobile.
我目前的理解是,HorizontalLayout将事物并排放置. VerticalLayout使事物相互叠加.那么我该如何同时使用两者的功能?
My current understanding is that a HorizontalLayout puts things side by side. And a VerticalLayout puts things on top of one another. So how do I go about using the functionality from both?
推荐答案
您需要研究使用其他布局类型. Vaadin为您提供CssLayout和CustomLayout以及标准的Vertical和Horizontal.
You need to look into using a different Layout type. Vaadin offers you a CssLayout and CustomLayout as well as the standard Vertical and Horizontal.
My personal favourite at the moment is using a CssLayout and then using a custom CSS Grid to make the components responsive.
Java:
@StyleSheet("MyStyleSheet.css")
public class ResponsiveLayout extends CssLayout {
private static final long serialVersionUID = -1028520275448675976L;
private static final String RESPONSIVE_LAYOUT = "responsive-layout";
private static final String LABEL_ONE = "label-one";
private static final String LABEL_TWO = "label-two";
private Label labelOne = new Label();
private Label labelTwo = new Label();
public ResponsiveLayout() {
config();
addComponents(labelOne, labelTwo);
}
private void config() {
addStyleName(RESPONSIVE_LAYOUT);
labelOne.addStyleName(LABEL_ONE);
labelTwo.addStyleName(LABEL_TWO);
}
}
CSS:
.responsive-layout {
display: grid !important;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
display: -ms-grid !important; /* IE */
-ms-grid-rows: auto; /* IE */
-ms-grid-columns: 1fr 1fr; /* IE */
}
.label-one {
grid-column: 1;
-ms-grid-column: 1; /* IE */
}
.label-two {
grid-column: 2;
-ms-grid-column: 2; /* IE */
}
@media all and (max-width : 992px) {
.responsive-layout {
grid-template-columns: 1fr;
-ms-grid-columns: 1fr; /* IE */
}
.label-one {
grid-column: 1;
-ms-grid-column: 1; /* IE */
}
.label-two {
grid-column: 1;
-ms-grid-column: 1; /* IE */
}
}
这篇关于Vaadin-响应式色谱柱的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!