LivePane (Live Pane v0.4.0)

View Source

Function components for PaneGroup, Pane, and PaneResizer. Allows users to write:

<LivePane.group id="demo">
  <LivePane.pane id="pane1" group_id="demo">
    <div>Pane 1</div>
  </LivePane.pane>
  <LivePane.resizer id="resizer1" group_id="demo">
    <div>Resizer 1</div>
  </LivePane.resizer>
  <LivePane.pane id="pane2" group_id="demo">
    <div>Pane 2</div>
  </LivePane.pane>
</LivePane.group>

Summary

Functions

The group component wraps a collection of panes or nested groups and manages resize events via the "PaneGroup" JS hook.

The Pane component is used to create an individual pane within a PaneGroup.

The Resizer component is used to create a draggable handle between two panes that allows the user to resize them.

Functions

group(assigns)

The group component wraps a collection of panes or nested groups and manages resize events via the "PaneGroup" JS hook.

Attributes

  • id (:string) (required) - The id of the group element.
  • direction (:string) - The direction of the panes. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • keyboard_resize_by (:integer) - The amount of space to add to the pane group when the keyboard resize event is triggered.
  • class (:string) - Extra classes to apply to the group. Defaults to "".
  • Global attributes are accepted.

Slots

  • inner_block (required)

pane(assigns)

The Pane component is used to create an individual pane within a PaneGroup.

Attributes

  • id (:string) (required) - The id of the pane element.
  • group_id (:string) (required) - ID of the group this pane belongs to.
  • class (:string) - Extra classes to apply to the pane. Defaults to "".
  • collapsed_size (:integer) - The size of the pane when it is in a collapsed state. Defaults to 0.
  • collapsible (:boolean) - Whether the pane can be collapsed. Defaults to false.
  • starting_size (:integer) - The starting size of the pane in percentage of the group's size when it is rendered. Defaults to nil.
  • max_size (:integer) - The maximum size of the pane in percentage of the group's size. Defaults to 100.
  • min_size (:integer) - The minimum size of the pane in percentage of the group's size. Defaults to 0.
  • order (:integer) - The order of the pane in the group. Useful for maintaining order when conditionally rendering panes. Defaults to 0.
  • Global attributes are accepted.

Slots

  • inner_block (required)

resizer(assigns)

The Resizer component is used to create a draggable handle between two panes that allows the user to resize them.

Attributes

  • id (:string) (required) - The id of the resize handle.
  • group_id (:string) (required) - The ID of the pane group the handle belongs to.
  • disabled (:boolean) - Whether the resize handle is disabled. Defaults to false.
  • class (:string) - Extra classes to apply to the handle. Defaults to "".
  • Global attributes are accepted.

Slots

  • inner_block