Split

The carousel of panes — content is revealed and hidden, never reflowed.

Split arranges a screen's main panes as a carousel. All panes live on one horizontal strip behind an overflow-hidden viewport; the screen's depth decides what shows. Two eased values drive every transition — pane 0's width fraction and the strip's X translation. Panes are only ever revealed or hidden by the viewport's edges; content never re-flows mid-animation.

Scroll grammar: SplitBox wraps SurfaceCard. Use SplitColumnScroll (column scrolls, stacked natural cards), SplitBoxScroll (hug then scroll inside one card), or SplitBoxFillScroll (flush height, Flexed body + Rigid footer — no outer list). Pane helpers subtract 2×CardProps{}.Pad() from content Max.Y; they do not nest Scrollable.

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 split

Usage

Pass every pane the screen can show — including currently hidden ones — so mid-animation frames render content sliding, never popping. Build each pane with SplitBox so appearing and disappearing panes look identical. LayoutSolo is the full-width pivot: two panes, one visible at a time.

open demo ↗

var s lotusui.Split

s.Layout(gtx, th.Space.MD, depth,
	lotusui.SplitBox(th, listPane),
	lotusui.SplitBox(th, detailPane),
	lotusui.SplitBox(th, editorPane),
)

VSlide

VSlide is Split's vertical sibling for full-screen pivots: the over-screen slides up from the bottom while the base screen is pushed up and away. Settled, only the visible screen is laid out; mid-flight, recorded frames are merely translated — verbatim pixels sliding, so moving content can never reflow, compress, or flicker.

open demo ↗

var v lotusui.VSlide

v.Layout(gtx, th, expanded, baseScreen, overScreen)

Column scroll

Independent columns: stack natural-height cards inside SplitColumnScroll — the column scrolls, not each card.

open demo ↗

var col widget.List

lotusui.SplitColumnScroll(th, &col, 0, lotusui.VStack(th.Space.MD,
	lotusui.SplitBox(th, cardA),
	lotusui.SplitBox(th, cardB),
	lotusui.SplitBox(th, cardC),
))

Pane scroll

SplitBoxScroll hugs while short; past maxH the body scrolls inside the card. Content Max.Y is maxH − 2×CardProps{}.Pad().

open demo ↗

var pane widget.List

lotusui.SplitBoxScroll(th, &pane, 0, tallBody)

Fill + pinned footer

SplitBoxFillScroll sets chrome height to maxH and re-asserts Min.Y = Max.Y on content after Card zeros it — Flexed body + Rigid footer work. Do not wrap that content in a list.

open demo ↗

lotusui.SplitBoxFillScroll(th, &unused, 0, func(gtx C) D {
	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
		layout.Flexed(1, scrollableBody),
		layout.Rigid(footerActions),
	)
})

API

Option	Type	Description
`gap`	`unit.Dp`	Layout parameter — spacing between the strip's panes.
`depth`	`int`	Which panes the viewport shows: 0 = pane 0 full width; n = panes n-1 and n side by side.
`boxes`	`...layout.Widget`	Every pane the screen can show, hidden ones included, so mid-animation frames slide instead of pop.
`SplitBox`	`widget`	SurfaceCard wrapper for a pane.
`SplitColumnScroll`	`widget`	Fixed-height column viewport; stack SplitBoxes inside.
`SplitBoxScroll`	`widget`	Hug while short; scroll inside the card past maxH (budgets CardProps{}.Pad()).
`SplitBoxFillScroll`	`widget`	Flush maxH card; Min.Y=Max.Y for Flexed body + Rigid footer (no list).