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. How those pieces (plus Wrap, SimpleGrid, Tabs) reflow when the window changes size is the Responsive guide.

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.
`LayoutPage(th, gtx, content)`	`widget`	Readable column; cap th.PageMax (default 920) or PageMaxAt.