LivePane (Live Pane v0.4.0)
View SourceFunction 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
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)
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 to0
.collapsible
(:boolean
) - Whether the pane can be collapsed. Defaults tofalse
.starting_size
(:integer
) - The starting size of the pane in percentage of the group's size when it is rendered. Defaults tonil
.max_size
(:integer
) - The maximum size of the pane in percentage of the group's size. Defaults to100
.min_size
(:integer
) - The minimum size of the pane in percentage of the group's size. Defaults to0
.order
(:integer
) - The order of the pane in the group. Useful for maintaining order when conditionally rendering panes. Defaults to0
.- Global attributes are accepted.
Slots
inner_block
(required)
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 tofalse
.class
(:string
) - Extra classes to apply to the handle. Defaults to""
.- Global attributes are accepted.
Slots
inner_block