LivePane (Live Pane v0.3.0)

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

group(assigns)

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

pane(assigns)

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

resizer(assigns)

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.
default_size (:integer) - The default size of the pane in percentage of the group's size. 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