Examples with ResponsiveStep com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep used on opensource projects

Example 1 with ResponsiveStep

use of com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep in project flow-components by vaadin.

the class FormLayoutView method createResponsiveLayout.

private void createResponsiveLayout() {
    FormLayout nameLayout = new FormLayout();
    TextField titleField = new TextField();
    titleField.setLabel("Title");
    titleField.setPlaceholder("Sir");
    TextField firstNameField = new TextField();
    firstNameField.setLabel("First name");
    firstNameField.setPlaceholder("John");
    TextField lastNameField = new TextField();
    lastNameField.setLabel("Last name");
    lastNameField.setPlaceholder("Doe");
    nameLayout.add(titleField, firstNameField, lastNameField);
    // Default number of columns in a FormLayout is 2. By setting the
    // responsive steps we specify different numbers for columns with
    // breakpoints at “40em” “32em” and “25em”. Now by changing the size of
    // the browser horizontally, you can notice that the number of the
    // columns in the FormLayout changes.
    nameLayout.setResponsiveSteps(new ResponsiveStep("1px", 1), new ResponsiveStep("600px", 2), new ResponsiveStep("700px", 3));
    addCard("A form layout with custom responsive layouting", nameLayout);
}

Example 2 with ResponsiveStep

use of com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep in project Akros-Marketplace by AkrosAG.

the class CategoryView method createEditorFormComponents.

private Component createEditorFormComponents() {
    Div div = new Div();
    FormLayout formLayout = new FormLayout();
    formLayout.setResponsiveSteps(new ResponsiveStep("0", 1, LabelsPosition.TOP));
    txtCategoryId = new NumberField("categoryId (Column: CATEGORY_ID)");
    txtCategoryId.setReadOnly(true);
    ValueChangeListener<ValueChangeEvent<?>> listener = getUpdateSaveButtonValueChangeListener();
    txtDescription = new TextArea("description (Column: DESCRIPTION)");
    txtDescription.setId(TEXT_CONTROL_DESCRIPTION);
    txtDescription.setClassName("full-width");
    txtDescription.setRequired(true);
    txtDescription.setHeightFull();
    txtDescription.setValueChangeMode(ValueChangeMode.LAZY);
    txtDescription.addValueChangeListener(listener);
    txtShortDescription = new TextField("shortDescription (Column: SHORT_DESCRIPTON)");
    txtShortDescription.setClassName("full-width");
    txtShortDescription.setRequired(true);
    txtShortDescription.setValueChangeMode(ValueChangeMode.LAZY);
    txtShortDescription.addValueChangeListener(listener);
    formLayout.add(txtCategoryId, txtDescription, txtShortDescription);
    div.add(formLayout);
    return div;
}

Example 3 with ResponsiveStep

use of com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep in project Akros-Marketplace by AkrosAG.

the class FieldTypeChooserView method createEditorFormComponents.

private Component createEditorFormComponents() {
    Div div = new Div();
    FormLayout formLayout = new FormLayout();
    formLayout.setResponsiveSteps(new ResponsiveStep("0", 1, LabelsPosition.TOP));
    txtFieldTypeChooseId = new NumberField("fieldTypeChooseId (Column: FIELD_TYPE_CHOOSE_ID)");
    txtFieldTypeChooseId.setReadOnly(true);
    ValueChangeListener<ValueChangeEvent<?>> listener = getUpdateSaveButtonValueChangeListener();
    txtDescription = new TextField("description (Column: DESCRIPTION)");
    txtDescription.setClassName("full-width");
    txtDescription.setRequired(true);
    txtDescription.addValueChangeListener(listener);
    txtDescription.setValueChangeMode(ValueChangeMode.LAZY);
    txtDescription.setId(TEXT_CONTROL_DESCRIPTION);
    txtSortNumber = new NumberField("sortNumber (Column: SORT_NUMBER)");
    txtSortNumber.setClassName("full-width");
    txtSortNumber.setRequiredIndicatorVisible(true);
    txtSortNumber.setValueChangeMode(ValueChangeMode.LAZY);
    txtSortNumber.addValueChangeListener(listener);
    formLayout.add(txtFieldTypeChooseId, txtDescription, txtSortNumber);
    div.add(formLayout);
    return div;
}

Example 4 with ResponsiveStep

use of com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep in project Akros-Marketplace by AkrosAG.

the class FieldTypeView method createEditorFormComponents.

private Component createEditorFormComponents() {
    Div div = new Div();
    FormLayout formLayout = new FormLayout();
    formLayout.setResponsiveSteps(new ResponsiveStep("0", 1, LabelsPosition.TOP));
    ValueChangeListener<ValueChangeEvent<?>> listener = getUpdateSaveButtonValueChangeListener();
    txtFieldTypeId = new NumberField("fieldTypeId (Column: FIELD_TYPE_ID)");
    txtFieldTypeId.setReadOnly(true);
    txtDescription = new TextArea("description (Column: DESCRIPTION)");
    txtDescription.setClassName("full-width");
    txtDescription.setRequired(true);
    txtDescription.setHeightFull();
    txtDescription.setValueChangeMode(ValueChangeMode.LAZY);
    txtDescription.addValueChangeListener(listener);
    txtDescription.setId(TEXT_CONTROL_DESCRIPTION);
    txtShortDescription = new TextField("shortDescription (Column: SHORT_DESCRIPTON)");
    txtShortDescription.setClassName("full-width");
    txtShortDescription.setRequired(true);
    txtShortDescription.setValueChangeMode(ValueChangeMode.LAZY);
    txtShortDescription.addValueChangeListener(listener);
    comboFieldTypeDefinitions = new ComboBox<FieldTypeDefinition>("fieldTypeDefinitionId (Column: FIELD_TYPE_DEFINITION_ID)", fieldTypeDefinitionService.list());
    comboFieldTypeDefinitions.setItemLabelGenerator(e -> String.format("%d: %s", e.getFieldTypeDefinitionId(), e.getDescription()));
    comboFieldTypeDefinitions.setRequired(true);
    comboFieldTypeDefinitions.addValueChangeListener(listener);
    txtMinValue = new NumberField("minValue (Column: MIN_VALUE)");
    txtMinValue.setClassName("full-width");
    txtMinValue.setRequiredIndicatorVisible(true);
    txtMinValue.setValueChangeMode(ValueChangeMode.LAZY);
    txtMinValue.addValueChangeListener(listener);
    txtMaxValue = new NumberField("maxValue (Column: MAX_VALUE)");
    txtMaxValue.setClassName("full-width");
    txtMaxValue.setRequiredIndicatorVisible(true);
    txtMaxValue.setValueChangeMode(ValueChangeMode.LAZY);
    txtMaxValue.addValueChangeListener(listener);
    chkOffer = new Checkbox("offer (Column: OFFER)");
    chkOffer.setClassName("full-width");
    chkSearch = new Checkbox("search (Column: SEARCH)");
    chkSearch.setClassName("full-width");
    chkRequired = new Checkbox("required (Column: REQUIRED)");
    chkRequired.setClassName("full-width");
    chkSearchable = new Checkbox("searchable (Column: SEARCHABLE)");
    chkSearchable.setClassName("full-width");
    txtSortNumber = new NumberField("sortNumber (Column: SORT_NUMBER)");
    txtSortNumber.setClassName("full-width");
    txtSortNumber.setRequiredIndicatorVisible(true);
    txtSortNumber.setValueChangeMode(ValueChangeMode.LAZY);
    txtSortNumber.addValueChangeListener(listener);
    formLayout.add(txtFieldTypeId, txtDescription, txtShortDescription, comboFieldTypeDefinitions, txtMinValue, txtMaxValue, chkOffer, chkSearch, chkRequired, chkSearchable, txtSortNumber);
    div.add(formLayout);
    return div;
}

Example 5 with ResponsiveStep

use of com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep in project flow-components by vaadin.

the class FormLayoutView method createLayoutHandleColspans.

private void createLayoutHandleColspans() {
    FormLayout columnLayout = new FormLayout();
    // Setting the desired responsive steps for the columns in the layout
    columnLayout.setResponsiveSteps(new ResponsiveStep("25em", 1), new ResponsiveStep("32em", 2), new ResponsiveStep("40em", 3));
    TextField firstName = new TextField();
    firstName.setPlaceholder("First Name");
    TextField lastName = new TextField();
    lastName.setPlaceholder("Last Name");
    TextField email = new TextField();
    email.setPlaceholder("Email");
    TextField nickname = new TextField();
    nickname.setPlaceholder("Username");
    TextField website = new TextField();
    website.setPlaceholder("Link to personal website");
    TextField description = new TextField();
    description.setPlaceholder("Enter a short description about yourself");
    columnLayout.add(firstName, lastName, nickname, email, website);
    // You can set the desired column span for the components individually.
    columnLayout.setColspan(website, 2);
    // Or just set it as you add them.
    columnLayout.add(description, 3);
    firstName.setId("colspan-first-name");
    lastName.setId("colspan-last-name");
    nickname.setId("colspan-nickname");
    email.setId("colspan-email");
    website.setId("colspan-website");
    description.setId("colspan-description");
    addCard("Handling columns and colspans in a layout", columnLayout);
}