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

Example 11 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project furms by unity-idm.

the class SitesAddView method addHeader.

private void addHeader() {
    FlexLayout headerLayout = new FlexLayout();
    headerLayout.setWidthFull();
    H4 title = new H4(getTranslation("view.sites.add.title"));
    headerLayout.add(title);
    getContent().add(headerLayout);
}

Example 12 with FlexLayout

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

the class ComboBoxView method customOptionsDemo.

private void customOptionsDemo() {
    // ComponentRenderer
    ComboBox<Information> comboBox = new ComboBox<>();
    comboBox.setLabel("User");
    comboBox.setItems(new Information("Gabriella", "https://randomuser.me/api/portraits/women/43.jpg"), new Information("Rudi", "https://randomuser.me/api/portraits/men/77.jpg"), new Information("Hamsa", "https://randomuser.me/api/portraits/men/35.jpg"), new Information("Jacob", "https://randomuser.me/api/portraits/men/76.jpg"));
    comboBox.setRenderer(new ComponentRenderer<>(information -> {
        Div text = new Div();
        text.setText(information.getText());
        Image image = new Image();
        image.setWidth("21px");
        image.setHeight("21px");
        image.setSrc(information.getImage());
        FlexLayout wrapper = new FlexLayout();
        text.getStyle().set("margin-left", "0.5em");
        wrapper.add(image, text);
        return wrapper;
    }));
    comboBox.setItemLabelGenerator(Information::getText);
    addCard("Presentation", "Customizing drop down items with ComponentRenderer", comboBox);
}

Example 13 with FlexLayout

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

the class ComboBoxView method configurationForRequired.

private void configurationForRequired() {
    ComboBox<String> requiredComboBox = new ComboBox<>();
    requiredComboBox.setItems("Option one", "Option two", "Option three");
    requiredComboBox.setLabel("Required");
    requiredComboBox.setPlaceholder("Select an option");
    requiredComboBox.setRequired(true);
    requiredComboBox.setClearButtonVisible(true);
    FlexLayout layout = new FlexLayout(requiredComboBox);
    layout.getStyle().set("flex-wrap", "wrap");
    addCard("Validation", "Required", layout);
}

Example 14 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout 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 15 with FlexLayout

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

the class OrderedLayoutView method createFlexLayoutWithOrderedItems.

private void createFlexLayoutWithOrderedItems() {
    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);
    layout.setOrder(0, component3);
    layout.setOrder(1, component1);
    layout.setOrder(2, component2);
    add(layout);
    layout.setId("flex-layout-with-ordered-items");
    addCard("FlexLayout", "FlexLayout with ordered items", layout);
}