Back

SplitPane

Horizontal split (drag divider)

Primary pane

Drag the divider to resize. Use arrow keys when the divider is focused.

Secondary pane

Content in the secondary pane.

Vertical split

Top pane

Vertical split — drag the horizontal divider.

Bottom pane

Content in the bottom pane.

Usage

@layout.SplitPane(layout.SplitPaneProps{
    Direction:    "horizontal",   // "horizontal" | "vertical"
    InitialSplit: 50,             // primary pane % (default 50)
    MinSplit:     15,             // min % (default 15)
    MaxSplit:     85,             // max % (default 85)
    Primary:      myLeftPanel(),  // templ.Component
    Secondary:    myRightPanel(),
})