Skip to content

VerticalLayout

Stacks its children vertically, one below the other.

VerticalLayout.builder()
.content(List.of(
new Text("First"),
new Text("Second")
))
.build()
PropertyTypeDefaultDescription
idStringOptional component ID
contentList<Component>Child components stacked top to bottom
spacingbooleanfalseAdds gap between children
paddingbooleanfalseAdds inner padding
marginbooleanfalseAdds outer margin
spacingVariantSpacingVariantControls spacing size
horizontalAlignmentHorizontalAlignmentAligns children horizontally (start, center, end, stretch)
justificationHorizontalLayoutJustificationJustification mode
wrapbooleanfalseAllows wrapping
flexGrowsList<Integer>[]Flex-grow values per child
fullWidthbooleanfalseStretches to full width
hiddenOverflowbooleanfalseHides overflow content
styleStringInline CSS
cssClassesStringCSS class names
// from a list
new VerticalLayout(List.of(comp1, comp2))
// varargs
new VerticalLayout(comp1, comp2, comp3)
VerticalLayout.builder()
.content(List.of(new Text("A"), new Text("B")))
.spacing(true)
.padding(true)
.build()
VerticalLayout.builder()
.content(List.of(new Text("Centered")))
.horizontalAlignment(HorizontalAlignment.center)
.build()
VerticalLayout.builder()
.content(List.of(new Text("Fills row")))
.fullWidth(true)
.build()