Layout

The readable page column, scrolling, titles, and virtualized lists.

Screen scaffolding: LayoutPage caps content at a readable width and centers it; Scrollable makes mixed content reachable; ListView is the virtualized list for real data. Every lotusui component is CONSTRAINT-DRIVEN — it lays out from the width it is given — so screens built from these pieces are responsive by construction. For the stacking primitives themselves see the Stack component.

The page column

LayoutPage is the readable column: content capped at 920dp, centered, padded — the difference between a window and a designed page.

lotusui.LayoutPage(th, gtx, func(gtx C) D {
	return content(gtx)
})

TitleWithIcons

A lotusui extension: an in-content / section title with trailing action icons. TopBar is screen chrome (centered title, optional leading); TitleWithIcons is content chrome (start-aligned LabelTitle, trailing icons). Empty icons → title alone.

open demo ↗

lotusui.TitleWithIcons(th, "Documents",
	lotusui.SVGIconButton(th, &add, lotusui.IconAdd, 20, false),
)

Two trailing icons

open demo ↗

lotusui.TitleWithIcons(th, "Documents",
	lotusui.SVGIconButton(th, &add, lotusui.IconAdd, 20, false),
	lotusui.SVGIconButton(th, &more, lotusui.IconSettings, 20, false),
)

Long lists

For a screen's mixed content, Scrollable; the moment a collection can grow with data, the virtualized ListView component.

API

Option	Type	Description
`TitleWithIcons(th, title, icons…)`	`widget`	LabelTitle + trailing icons (Space.XS between icons only).
`TopBar(th, title, leading)`	`widget`	Screen chrome — centered title, optional leading.