SplitPane

A resizable split view container with a draggable divider.

Usage

ui.splitPane(
  {
    id: "main-split",
    direction: "horizontal",
    sizes: state.panelSizes,
    minSizes: [20, 30, 20],
    dividerSize: 1,
    onResize: (sizes) => app.update((s) => ({ ...s, panelSizes: sizes })),
  },
  [FileExplorer(), Editor(), LogsPanel()]
)

Props

Behavior

Dividers between panels can be dragged with the mouse to resize:

• Mouse down on a divider starts the drag
• Moving the mouse updates panel sizes in real-time via the onResize callback
• Mouse up ends the drag

The hit area for dividers extends 1 cell on each side of the divider for easier grabbing.

Collapse

When collapsible: true:

• A panel index in collapsed is laid out at its minimum size (minSizes[index] or 0).
• Double-click near a divider to toggle collapse:
  • Click just to the left/top of a divider to target the panel on that side
  • Click just to the right/bottom of a divider to target the other panel
• Use onCollapse(index, collapsed) to update your collapsed list (controlled state).

Notes

• sizes length should match the number of child panels.
• Use PanelGroup for equal distribution without drag handles.

Related

• Panel group
• Resizable panel