Stack

VStack, HStack, and Wrap: children size themselves; gap (and wrap) is the whole job.

A lotusui extension: the stacking primitives that stop screens hand-weaving spacer children between rows. VStack stacks vertically, HStack horizontally with children centered on the cross axis. Wrap is Chakra's Wrap / CSS flex-wrap — flow left-to-right, then the next line, measuring each child at its intrinsic width so labels never squeeze into one-character columns the way HStack can under a narrow Max.X. Prefer SimpleGrid when you want equal cells and a fixed column count.

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add stack

VStack

open demo ↗

lotusui.VStack(th.Space.SM, first, second, third)

HStack

Children center on the cross axis, so a switch and its label sit on one visual line. Never wraps — under a narrow Max.X, Rigid children are squeezed.

open demo ↗

lotusui.HStack(th.Space.SM, one, two, three)

Wrap

Same gap between items and between lines. Cross-axis align is per line (layout.Middle for chips and icons). A child wider than Max.X alone is laid out at Max.X.

open demo ↗

lotusui.Wrap(th.Space.SM, layout.Middle,
	chip("alpha"), chip("bravo"), chip("charlie"),
	chip("delta"), chip("echo"), chip("foxtrot"))

Hairlines and spacers

Hairline draws the 1dp divider spanning the available width — use it only inside a vertical flex; between horizontal siblings use VerticalHairline. Spacer/HSpacer are fixed gaps for ad-hoc composition.

open demo ↗

lotusui.Hairline(th)         // inside a vertical stack
lotusui.VerticalHairline(th) // between horizontal siblings

API

Option	Type	Description
`VStack(gap, children...)`	`unit.Dp`	Vertical stack; the gap is the whole job.
`HStack(gap, children...)`	`unit.Dp`	Horizontal stack, children centered on the cross axis. Never wraps.
`Wrap(gap, align, children...)`	`unit.Dp, Alignment`	Flex-wrap row; intrinsic widths; same gap for items and lines.
`Spacer(h) / HSpacer(w)`	`unit.Dp`	Fixed gaps for ad-hoc composition.
`Hairline(th) / VerticalHairline(th)`	`widget`	1dp rules; vertical for row siblings.