Examples with FlexLayout com.vaadin.flow.component.orderedlayout.FlexLayout used on opensource projects

Example 1 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project flow-components by vaadin.

the class FlexLayoutTest method replace_componentToNull_removeAsResult.

@Test
public void replace_componentToNull_removeAsResult() {
    FlexLayout layout = new FlexLayout();
    layout.add(new Label());
    Div div = new Div();
    layout.add(div);
    layout.replace(div, null);
    Assert.assertEquals(1, layout.getComponentCount());
}

Example 2 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project flow-components by vaadin.

the class FlexLayoutTest method replace_nullToComponent_appendAsResult.

@Test
public void replace_nullToComponent_appendAsResult() {
    FlexLayout layout = new FlexLayout();
    layout.add(new Label());
    Div div = new Div();
    layout.replace(null, div);
    Assert.assertEquals(div, layout.getComponentAt(1));
}

Example 3 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project flow-components by vaadin.

the class OrderedLayoutView method createFlexLayoutWithFlexDirection.

private void createFlexLayoutWithFlexDirection() {
    FlexLayout layout = new FlexLayout();
    layout.setWidth("100%");
    layout.setHeight("150px");
    layout.getStyle().set("border", "1px solid #9E9E9E");
    Component component1 = createComponent(1, "#78909C");
    Component component2 = createComponent(2, "#546E7A");
    Component component3 = createComponent(3, "#37474F");
    layout.add(component1, component2, component3);
    Consumer<FlexLayout.FlexDirection> flexDirectionConsumer = flexDirection -> layout.setFlexDirection(flexDirection);
    RadioButtonGroup<FlexLayout.FlexDirection> rbg = createRadioButtonGroup(FlexLayout.FlexDirection.values(), flexDirectionConsumer, FlexLayout.FlexDirection.ROW);
    layout.setId("flex-layout-with-flex-direction");
    addCard("FlexLayout", "FlexLayout with flex direction", layout, rbg);
}

Example 4 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project flow-components by vaadin.

the class OrderedLayoutView method createFlexLayoutWithFlexBasis.

private void createFlexLayoutWithFlexBasis() {
    FlexLayout layout = new FlexLayout();
    layout.setWidth("100%");
    layout.setHeight("50px");
    layout.getStyle().set("border", "1px solid #9E9E9E");
    Component component1 = createComponent(1, "#78909C");
    Component component2 = createComponent(2, "#546E7A");
    Component component3 = createComponent(3, "#37474F");
    layout.add(component1, component2, component3);
    RadioButtonGroup<String> widths = new RadioButtonGroup<>();
    widths.setItems("200px", "100%", "auto");
    widths.setValue("auto");
    widths.addValueChangeListener(event -> layout.setFlexBasis(event.getValue(), component1));
    layout.setId("flex-layout-with-flex-basis");
    addCard("FlexLayout", "FlexLayout with flex basis", layout, widths);
}

Example 5 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project flow-components by vaadin.

the class OrderedLayoutView method createFlexLayoutWithFlexShrink.

private void createFlexLayoutWithFlexShrink() {
    FlexLayout layout = new FlexLayout();
    layout.setWidth("100%");
    layout.setHeight("50px");
    layout.getStyle().set("border", "1px solid #9E9E9E");
    Component component1 = createComponent(1, "#78909C");
    Component component2 = createComponent(2, "#546E7A");
    Component component3 = createComponent(3, "#37474F");
    layout.setFlexBasis("500px", component1, component2, component3);
    layout.add(component1, component2, component3);
    RadioButtonGroup<Integer> shrinkValues = new RadioButtonGroup<>();
    shrinkValues.setItems(0, 1, 2);
    shrinkValues.setValue(1);
    shrinkValues.addValueChangeListener(event -> layout.setFlexShrink(event.getValue(), component1));
    layout.setId("flex-layout-with-flex-shrink");
    addCard("FlexLayout", "FlexLayout with flex shrink", layout, shrinkValues);
}