Renders two panes separated by a resizable divider.

<.split_panel id="editor" default={40} min={20} max={70} storage_key="editor-split">
  <:primary><.scroll_area style="max-block-size: 20rem">…</.scroll_area></:primary>
  <:secondary>Preview</:secondary>
</.split_panel>

<.split_panel id="stack" orientation="vertical" style="block-size: 24rem">…</.split_panel>

Sizes are percentages of the container and apply to the primary pane; the secondary pane takes the rest. The divider is a role="separator" with aria-valuenow; drag it with a pointer or focus it and use the keyboard: arrows resize by 1% (10% with Shift), Home/End jump to min/max, Enter collapses to min and back, double-click restores default. With storage_key the size is remembered in localStorage.

Attributes

• id (:string) (required)
• orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
• default (:integer) - initial size of the primary pane, percent. Defaults to 50.
• min (:integer) - Defaults to 10.
• max (:integer) - Defaults to 90.
• storage_key (:string) - localStorage key to remember the size. Defaults to nil.
• label (:string) - divider's accessible name, defaults to "Resize panels". Defaults to nil.
• style (:string) - inline style; vertical splits need a block-size. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• primary (required) - the sized pane.
• secondary (required) - takes the remaining space.