Components
Flow Layout
The Flow Layout Component.
The flow layout component arranges its children in a vertical or horizontal flow. It supports various alignment and sizing options.
Parameters
direction
vertical | horizontal | ltr-text-flow required
The direction of the flow layout.
gap
int
The gap between child components in pixels.
padding
int | (int,int,int,int)
The padding around the child components.
surface
#hex
The background surface of the flow layout.
horizontal-alignment
left | right | center
The horizontal alignment of the child components.
vertical-alignment
top | middle | bottom
The vertical alignment of the child components.
allow-overflow
boolean
Whether to allow child components to overflow the bounds of the flow layout.
Examples
Containers.verticalFlow(Sizing.fill(100), Sizing.content())
.child(Components.label(Text.literal("Item 1")))
.child(Components.label(Text.literal("Item 2")))
.gap(10)
.padding(Insets.of(20))
.surface(Surface.PANEL)
.horizontalAlignment(HorizontalAlignment.CENTER)
.verticalAlignment(VerticalAlignment.CENTER)
<flow-layout direction="vertical">
<children>
<label>
<text>Item 1</text>
</label>
<label>
<text>Item 2</text>
</label>
</children>
<gap>10</gap>
<padding>
<all>20</all>
</padding>
<surface>
<panel/>
</surface>
<horizontal-alignment>center</horizontal-alignment>
<vertical-alignment>center</vertical-alignment>
</flow-layout>