Vaadin – 响应列

我是新手使用Vaadin并且一直试图弄清楚如何在全屏时让两个组件并排，但是当屏幕移动时，它们会叠加在一起。

我目前的理解是Horizo​​ntalLayout将事物并排放置。 VerticalLayout将事物放在一起。 那么我该如何使用两者的function呢？

Answer 1

您需要研究使用不同的布局类型。 Vaadin为您提供CssLayout和CustomLayout以及标准垂直和水平。

我个人最喜欢的是使用CssLayout然后使用自定义CSS网格来使组件响应。

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 */ } } 

Answer 2

您可以使用Vaadin Add-on响应布局 。 使用flexboxgrid的网格系统

 @Override public void enter(ViewChangeListener.ViewChangeEvent event) { ResponsiveLayout responsiveLayout = new ResponsiveLayout(); responsiveLayout.setSizeFull(); ResponsiveRow rowOne = responsiveLayout.addRow(); Button deleteButton = new Button("", VaadinIcons.TRASH); deleteButton.addStyleName(ValoTheme.BUTTON_DANGER); deleteButton.setSizeFull(); Button commentButton = new Button("",VaadinIcons.COMMENT); commentButton.addStyleName(ValoTheme.BUTTON_PRIMARY); commentButton.setSizeFull(); Button editButton = new Button("", VaadinIcons.EDIT); editButton.addStyleName(ValoTheme.BUTTON_FRIENDLY); editButton.setSizeFull(); rowOne.addColumn().withDisplayRules(12,6,4,4).withComponent(deleteButton); rowOne.addColumn().withDisplayRules(12,6,4,4).withComponent(commentButton); rowOne.addColumn().withDisplayRules(12,6,4,4).withComponent(editButton); ResponsiveRow rowTwo = responsiveLayout.addRow(); Label labelOne = new Label("LABEL 1"); Label labelTwo = new Label("LABEL 2"); rowTwo.addColumn().withDisplayRules(12,6,4,4).withComponent(labelOne); rowTwo.addColumn().withDisplayRules(12,6,4,4).withComponent(labelTwo); setSizeFull(); addComponent(responsiveLayout); } 

您可以在此处查看基本示例

Answer 3

您可以组合布局，您可能希望在垂直布局中放置两个水平布局。 想想“盒子里的盒子”。 从那里你可以通过css微调你的布局，只需分析生成的HTML。

他们前段时间有关于布局的网络研讨会 ，也许这会有所帮助。