- 1.5.0

Split Pane

Renders a horizontal or vertical resizable split pane.

Read more Read less

Maturity: Developing

Missing features

  • Reporting the size to the server, so that it can be persisted
  • Snapping to preset positions
  • Choosing which pane keeps its size when the split pane itself is resized

Usage

Vertical separator with label:

<.split_pane
  id="sidebar-splitter"
  label="Sidebar"
  orientation="vertical"
  default_size={30}
>
  <:primary>One</:primary>
  <:secondary>Two</:secondary>
</.split_pane>

Vertical separator with visible label:

<.split_pane id="sidebar-splitter"
  labelledby="sidebar-label"
  orientation="vertical"
  default_size={30}
>
  <:primary>
    <h2 id="sidebar-label">Sidebar</h2>
    <p>One</p>
  </:primary>
  <:secondary>Two</:secondary>
</.split_pane>

Nested window splitters:

<.split_pane
  id="sidebar-splitter"
  label="Sidebar"
  orientation="vertical"
  default_size={30}
>
  <:primary>One</:primary>
  <:secondary>
    <.split_pane
      id="filter-splitter"
      label="Filters"
      orientation="horizontal"
      default_size={50}
    >
      <:primary>Two</:primary>
      <:secondary>Three</:secondary>
    </.split_pane>
  </:secondary>
</.split_pane>

The size of the primary pane is written to the --split-pane-position custom property on the outer element as a percentage. Your stylesheet must apply that property to the layout.

A split pane with a horizontal separator needs a height of its own, or both panes stay at the size of their content.

Keyboard

  • Left and Right - move a vertical separator by one percent.
  • Up and Down - move a horizontal separator by one percent.
  • Shift + arrow key - move by ten percent.
  • Home and End - the smallest and the largest size.
  • Enter - collapse the primary pane, or restore the size it had before.

The size is the hook's own state and it survives a LiveView patch, so default_size applies on the first render only.

Vertical
Open in playground

The panes sit side by side. Left and Right move the separator.

One
Two
<.split_pane
  id="split-pane-single-vertical"
  label="Sidebar"
  max_size={90}
  min_size={10}
  default_size={30}
  orientation={:vertical}
>
  <:primary>One</:primary>
  <:secondary>Two</:secondary>
</.split_pane>
Horizontal
Open in playground

The panes sit above each other. Up and Down move the separator.

One
Two
<.split_pane
  id="split-pane-single-horizontal"
  label="Sidebar"
  max_size={90}
  min_size={10}
  default_size={50}
  orientation={:horizontal}
>
  <:primary>One</:primary>
  <:secondary>Two</:secondary>
</.split_pane>
Nested
Open in playground

Each split pane moves its own separator.

One
Two
Three
<.split_pane
  id="split-pane-single-nested"
  label="Sidebar"
  default_size={30}
  orientation={:vertical}
>
  <:primary>One</:primary>
  <:secondary>
    <.split_pane
      id="filter-splitter"
      label="Filters"
      orientation="horizontal"
      default_size={50}
    >
      <:primary>Two</:primary>
      <:secondary>Three</:secondary>
    </.split_pane>
  </:secondary>
</.split_pane>