Doggo Storybook 0.10.2

Split Pane

Renders a horizontal or vertical resizable split pane.

Read more Read less

Usage

Horizontal separator with label:

<.split_pane
  id="sidebar-splitter"
  label="Sidebar"
  orientation="horizontal"
>
  <:primary>One</:primary>
  <:secondary>Two</:secondary>
</.split_pane>

Horizontal separator with visible label:

<.split_pane id="sidebar-splitter"
  labelledby="sidebar-label"
  orientation="horizontal"
>
  <: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="horizontal"
>
  <:primary>One</:primary>
  <:secondary>
    <.split_pane
      id="filter-splitter"
      label="Filters"
      orientation="vertical"
    >
      <:primary>Two</:primary>
      <:secondary>Three</:secondary>
    </.split_pane>
  </:secondary>
</.split_pane>
Horizontal Open in playground
One
Two
<.split_pane
  id="split-pane-single-horizontal"
  label="Sidebar"
  orientation={:horizontal}
  default_size={100}
>
  <:primary>One</:primary>
  <:secondary>Two</:secondary>
</.split_pane>
Vertical Open in playground
One
Two
<.split_pane
  id="split-pane-single-vertical"
  label="Sidebar"
  orientation={:vertical}
  default_size={100}
>
  <:primary>One</:primary>
  <:secondary>Two</:secondary>
</.split_pane>
Nested Open in playground
One
Two
Three
<.split_pane
  id="split-pane-single-nested"
  label="Sidebar"
  orientation={:horizontal}
  default_size={100}
>
  <:primary>One</:primary>
  <:secondary>
    <.split_pane
      id="filter-splitter"
      label="Filters"
      orientation="vertical"
      default_size={50}
    >
      <:primary>Two</:primary>
      <:secondary>Three</:secondary>
    </.split_pane>
  </:secondary>
</.split_pane>