Doggo Storybook 0.9.0

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>
One
Two
Three
Attribute Type Documentation Default Value
class :any Any additional classes to be added. 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
Required id * :string
label :string An accessibility label for the separator if the primary pane has no visible 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.
labelledby :string If the primary pane has a visible label, set this attribute to the DOM ID of that label. Otherwise, provide a label via the `label` attribute.
max_size :integer 100
min_size :integer 0
Required orientation * :string
rest :global Any additional HTML attributes.
Required primary * :slot 
<: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>
Required secondary * :slot 
<:secondary>
  <.split_pane
    id="filter-splitter"
    label="Filters"
    orientation="vertical"
    default_size={50}
  >
    <:primary>Two</:primary>
    <:secondary>Three</:secondary>
  </.split_pane>
</:secondary>