- 1.4.1

Split Pane

Renders a horizontal or vertical resizable split pane.

Read more Read less

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.

One
Two
Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
Required default_size * :integer

The size of the primary pane in percent on the first render.

 Read more Read less
Required id * :string
label :string

An accessibility label for the separator if the primary pane has no visible

 Read more Read less

label. If it has a visible label, set the labelledby attribute instead.

Note that the label should describe the primary pane, not the resize handle.

Do not repeat the word separator in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby :string

If the primary pane has a visible label, set this attribute to the DOM ID

 Read more Read less

of that label. Otherwise, provide a label via the label attribute.
max_size :integer

The largest size of the primary pane in percent.
100
min_size :integer

The smallest size of the primary pane in percent.
0
Required orientation * :string

The orientation of the separator, not of the panes: a vertical

 Read more Read less

separator stands between two panes side by side, a horizontal one between two panes above each other.
rest :global

Any additional HTML attributes.
Required primary * :slot 
<:primary>One</:primary>
Required secondary * :slot 
<:secondary>Two</:secondary>