Doggo Storybook 0.10.4-34-g3a480e9

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
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
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.
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 100
min_size :integer 0
Required orientation * :string
rest :global

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