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

Example 1 with Alignment

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

the class OrderedLayoutView method createHorizontalLayoutWithDefaultAlignment.

private void createHorizontalLayoutWithDefaultAlignment() {
    HorizontalLayout layout = new HorizontalLayout();
    layout.setWidth("100%");
    layout.setHeight("150px");
    layout.getStyle().set("border", "1px solid #9E9E9E");
    layout.setJustifyContentMode(FlexComponent.JustifyContentMode.BETWEEN);
    // the default is Alignment.BASELINE
    layout.setDefaultVerticalComponentAlignment(Alignment.CENTER);
    Component component1 = createComponent(1, "#78909C");
    Component component2 = createComponent(2, "#546E7A");
    Component component3 = createComponent(3, "#37474F");
    layout.add(component1, component2, component3);
    add(layout);
    component2.getElement().getStyle().set("fontSize", "24px");
    component3.getElement().getStyle().set("fontSize", "9px");
    RadioButtonGroup<Alignment> alignments = new RadioButtonGroup<>();
    alignments.setItems(Alignment.values());
    alignments.setRenderer(new TextRenderer<>(alignment -> alignment.name().toLowerCase()));
    alignments.setValue(Alignment.CENTER);
    alignments.setId("horizontal-layout-alignment-radio-button");
    alignments.addValueChangeListener(event -> layout.setDefaultVerticalComponentAlignment(event.getValue()));
    layout.setId("layout-with-alignment");
    addCard("HorizontalLayout", "HorizontalLayout with general alignment", layout, alignments);
}

Example 2 with Alignment

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

the class OrderedLayoutView method createFlexLayoutWithAlignmentContent.

/* FlexLayout demos */
private void createFlexLayoutWithAlignmentContent() {
    FlexLayout layout = new FlexLayout();
    layout.setWidth("130px");
    layout.setHeight("150px");
    layout.getStyle().set("border", "1px solid #9E9E9E");
    layout.setFlexWrap(FlexLayout.FlexWrap.WRAP);
    Component component1 = createComponent(1, "#78909C");
    Component component2 = createComponent(2, "#546E7A");
    Component component3 = createComponent(3, "#37474F");
    layout.add(component1, component2, component3);
    layout.setId("flex-layout-with-alignment-content");
    Consumer<FlexLayout.ContentAlignment> changeLayout = alignment -> layout.setAlignContent(alignment);
    addCard("FlexLayout", "FlexLayout with alignment content", layout, createRadioButtonGroup(FlexLayout.ContentAlignment.values(), changeLayout, layout.getAlignContent()));
}

Example 3 with Alignment

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

the class OrderedLayoutView method createVerticalLayoutWithDefaultAlignment.

private void createVerticalLayoutWithDefaultAlignment() {
    VerticalLayout layout = new VerticalLayout();
    layout.getStyle().set("border", "1px solid #9E9E9E");
    layout.setJustifyContentMode(FlexComponent.JustifyContentMode.BETWEEN);
    // the default is Alignment.START
    layout.setDefaultHorizontalComponentAlignment(Alignment.STRETCH);
    Component component1 = createComponent(1, "#78909C");
    Component component2 = createComponent(2, "#546E7A");
    Component component3 = createComponent(3, "#37474F");
    layout.add(component1, component2, component3);
    add(layout);
    component2.getElement().setText("Component 2 with long text");
    component3.getElement().setText("C 3");
    RadioButtonGroup<Alignment> alignments = new RadioButtonGroup<>();
    alignments.setItems(Alignment.values());
    alignments.setRenderer(new TextRenderer<>(alignment -> alignment.name().toLowerCase()));
    alignments.setValue(Alignment.STRETCH);
    alignments.setId("vertical-layout-alignment-radio-button");
    alignments.addValueChangeListener(event -> layout.setDefaultHorizontalComponentAlignment(event.getValue()));
    layout.setId("vertical-layout-with-alignment");
    addCard("VerticalLayout", "VerticalLayout with general alignment", layout, alignments);
}