com.vaadin.flow.component.formlayout

Class GeneratedVaadinFormLayout<R extends GeneratedVaadinFormLayout<R>>

java.lang.Object

com.vaadin.flow.component.Component

com.vaadin.flow.component.formlayout.GeneratedVaadinFormLayout<R>

All Implemented Interfaces:

AttachNotifier, DetachNotifier, HasElement, HasStyle, Serializable

Direct Known Subclasses:

FormLayout

@Tag(value="vaadin-form-layout")
 @NpmPackage(value="@vaadin/vaadin-form-layout",
            version="2.3.0")
 @JsModule(value="@vaadin/vaadin-form-layout/src/vaadin-form-layout.js")
 @HtmlImport(value="frontend://bower_components/vaadin-form-layout/src/vaadin-form-layout.html")
public abstract class GeneratedVaadinFormLayout<R extends GeneratedVaadinFormLayout<R>>
extends Component
implements HasStyle

Description copied from corresponding location in WebComponent:

<vaadin-form-layout> is a Web Component providing configurable responsive layout for form elements.

<vaadin-form-layout>

<vaadin-form-item> <label slot="label">First Name</label> <input class="full-width" value="Jane"> </vaadin-form-item>

<vaadin-form-item> <label slot="label">Last Name</label> <input class="full-width" value="Doe"> </vaadin-form-item>

<vaadin-form-item> <label slot="label">Email</label> <input class="full-width" value="[email protected]"> </vaadin-form-item>

</vaadin-form-layout>

It supports any child elements as layout items.

By default, it makes a layout of two columns if the element width is equal or wider than 40em, and a single column layout otherwise.

The number of columns and the responsive behavior are customizable with the responsiveSteps property.

Spanning Items on Multiple Columns

You can use colspan attribute on the items. In the example below, the first text field spans on two columns:

<vaadin-form-layout>

<vaadin-form-item colspan="2"> <label slot="label">Address</label> <input class="full-width"> </vaadin-form-item>

<vaadin-form-item> <label slot="label">First Name</label> <input class="full-width" value="Jane"> </vaadin-form-item>

<vaadin-form-item> <label slot="label">Last Name</label> <input class="full-width" value="Doe"> </vaadin-form-item>

</vaadin-form-layout>

Explicit New Row

Use the <br> line break element to wrap the items on a new row:

<vaadin-form-layout>

<vaadin-form-item> <label slot="label">Email</label> <input class="full-width"> </vaadin-form-item>

<br>

<vaadin-form-item> <label slot="label">Confirm Email</label> <input class="full-width"> </vaadin-form-item>

</vaadin-form-layout>

CSS Properties Reference

The following custom CSS properties are available on the <vaadin-form-layout> element:

Custom CSS property	Description	Default
--vaadin-form-layout-column-spacing	Length of the spacing between columns	2em

See Also:

Serialized Form

Constructor Summary

Constructors

Constructor and Description
GeneratedVaadinFormLayout()

Method Summary

Modifier and Type	Method and Description
protected elemental.json.JsonObject	getResponsiveStepsJsonObject() Description copied from corresponding location in WebComponent:
protected void	setResponsiveSteps(elemental.json.JsonObject responsiveSteps) Description copied from corresponding location in WebComponent:
protected void	updateStyles(elemental.json.JsonObject _Args) Description copied from corresponding location in WebComponent:

Methods inherited from class com.vaadin.flow.component.Component

addListener, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getLocale, getParent, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onAttach, onDetach, onEnabledStateChanged, set, setElement, setId, setVisible

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Methods inherited from interface com.vaadin.flow.component.HasStyle

addClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

Methods inherited from interface com.vaadin.flow.component.HasElement

getElement

Methods inherited from interface com.vaadin.flow.component.AttachNotifier

addAttachListener

Methods inherited from interface com.vaadin.flow.component.DetachNotifier

addDetachListener

Constructor Detail

GeneratedVaadinFormLayout

public GeneratedVaadinFormLayout()

Method Detail

getResponsiveStepsJsonObject

protected elemental.json.JsonObject getResponsiveStepsJsonObject()

Description copied from corresponding location in WebComponent:

Allows specifying a responsive behavior with the number of columns and the label position depending on the layout width.

Format: array of objects, each object defines one responsive step with minWidth CSS length, columns number, and optional labelsPosition string of "aside" or "top". At least one item is required.

Examples

javascript formLayout.responsiveSteps = [ columns: 1]; // The layout is always a single column, labels aside.}

javascript formLayout.responsiveSteps = [ {minWidth: 0, columns: 1}, {minWidth: '40em', columns: 2} ]; // Sets two responsive steps: // 1. When the layout width is < 40em, one column, labels aside. // 2. Width >= 40em, two columns, labels aside.

javascript formLayout.responsiveSteps = [ {minWidth: 0, columns: 1, labelsPosition: 'top'}, {minWidth: '20em', columns: 1}, {minWidth: '40em', columns: 2} ]; // Default value. Three responsive steps: // 1. Width < 20em, one column, labels on top. // 2. 20em <= width < 40em, one column, labels aside. // 3. Width >= 40em, two columns, labels aside.

This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

Returns:

the responsiveSteps property from the webcomponent

setResponsiveSteps

protected void setResponsiveSteps(elemental.json.JsonObject responsiveSteps)

Description copied from corresponding location in WebComponent:

Allows specifying a responsive behavior with the number of columns and the label position depending on the layout width.

Format: array of objects, each object defines one responsive step with minWidth CSS length, columns number, and optional labelsPosition string of "aside" or "top". At least one item is required.

Examples

javascript formLayout.responsiveSteps = [ columns: 1]; // The layout is always a single column, labels aside.}

javascript formLayout.responsiveSteps = [ {minWidth: 0, columns: 1}, {minWidth: '40em', columns: 2} ]; // Sets two responsive steps: // 1. When the layout width is < 40em, one column, labels aside. // 2. Width >= 40em, two columns, labels aside.

javascript formLayout.responsiveSteps = [ {minWidth: 0, columns: 1, labelsPosition: 'top'}, {minWidth: '20em', columns: 1}, {minWidth: '40em', columns: 2} ]; // Default value. Three responsive steps: // 1. Width < 20em, one column, labels on top. // 2. 20em <= width < 40em, one column, labels aside. // 3. Width >= 40em, two columns, labels aside.

Parameters:

responsiveSteps - the JsonObject value to set

updateStyles

protected void updateStyles(elemental.json.JsonObject _Args)

Description copied from corresponding location in WebComponent:

Set custom CSS property values and update the layout.

Parameters:

_Args - Missing documentation!