我要求 - 响应列

Question

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

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

Answer 1

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

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

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 responsive layout。使用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);
}

你可以查看basic example here

Answer 3

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

They had a webinar about layouts前段时间，也许这有帮助。