On This Page
A vertical layout layouts children vertically.
- Fluent
- Declarative
VerticalLayout.builder()
.content(List.of(
buildPanel(),
buildPanel()
))
.build()
// ...
private Object buildPanel() {
// returns any component or object;
}
@VerticalLayout
List panels = List.of(
buildPanel(),
buildPanel()
);
// ...
private Object buildPanel() {
// returns any component or object;
}
or
@VerticalLayout
class Container {
Object left = buildPanel();
Object right = buildPanel();
}
Available properties
This is the list of available properties for a vertical layout:
| Property | Description | Notes |
|---|---|---|
| id | id for this component | |
| cssClasses | list of css classes | content of the css attribute |
| style | inline style attributes | content of the style attribute |
| padding | to add some padding to the elements | true/false |
| spacing | to add some spacing between elements | true/false |
| fullWidth | shortcut to set width:100% | true/false |
| justification | justification of elements | one of START, CENTER, END, BETWEEN, AROUND, EVENLY |
| flexGrows | list of flex grows values for elements | e.g. List.of(0,0,1,0) |
| spacingVariant | amount of space between elements | one of xs, x, m, l, xl |
| wrap | wrap if content does not fit | true/false |
| horizontalAlignment | horizontal alignment for elements | one of STRETCH, START, CENTER, END |
You can see a full explanation of those properties at https://vaadin.com/docs/latest/components/vertical-layout