BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Resizable Panels

Drag-to-resize panel layout.

Package
@solidiom/resizable-panels
Version
0.0.1-next.0
Status
stable

Generated from the package's public source.

API

Handlecomponent

@solidiom/resizable-panels — Headless resizable panel layout primitive. Parts: PanelGroup, Panel, Handle.

                        Handle(props: HandleProps): Element

Props

class?
string
disabled?
boolean — Whether this handle is disabled.
index
number — The index of the handle (separates panel[index] and panel[index+1]).
ref?
(el: HTMLDivElement) => void

children: Element

View source

HandlePropsinterface

Props for a resize handle between panels.

Props

class?
string
disabled?
boolean — Whether this handle is disabled.
index
number — The index of the handle (separates panel[index] and panel[index+1]).
ref?
(el: HTMLDivElement) => void

children: Element

View source

Panelcomponent

@solidiom/resizable-panels — Headless resizable panel layout primitive. Parts: PanelGroup, Panel, Handle.

                        Panel(props: PanelProps): Element

Props

class?
string
collapsible?
boolean — Whether the panel can collapse to 0 below minSize.
defaultSize?
number
maxSize?
number
minSize?
number — Size constraints for this panel.
order
number — Unique order index for this panel within the group.
ref?
(el: HTMLDivElement) => void
style?
string | CSSProperties

children: Element

View source

PanelConstraintsinterface

Size constraint for a single panel.

Props

collapsible?
boolean — Whether this panel can collapse to 0 when dragged below minSize.
defaultSize?
number — Default size as a percentage.
maxSize?
number — Maximum size as a percentage (0–100). Default: 100.
minSize?
number — Minimum size as a percentage (0–100). Default: 0.

View source

PanelEntryinterface

Registration entry for a panel in the group.

Props

constraints
PanelConstraints
id
string
order
number

View source

PanelGroupcomponent

@solidiom/resizable-panels — Headless resizable panel layout primitive. Parts: PanelGroup, Panel, Handle.

                        PanelGroup(props: PanelGroupProps): Element

Props

class?
string
defaultSizes?
number[] — Default sizes for uncontrolled mode.
direction?
"horizontal" | "vertical" — Layout direction. Default: "horizontal".
onSizesChange?
(sizes: number[], details: ChangeDetails<PanelResizeReason>) => void — Called when panel sizes change.
sizes?
Accessor<number[]> — Controlled panel sizes as percentages.

children: Element

View source

PanelGroupContextValueinterface

Props

baseId
string — Generated base ID.
direction
Accessor<"horizontal" | "vertical"> — Layout direction.
panels
Accessor<PanelEntry[]> — Ordered panel entries.
registerPanel
(entry: PanelEntry) => () => void — Register a panel and return a cleanup function.
requestSizeChange
(sizes: number[], details: ChangeDetails<PanelResizeReason>) => void — Request a size change for the group layout.
sizes
Accessor<number[]> — Current panel sizes as percentages, indexed by panel order.

View source

PanelGroupPropsinterface

Props for the resizable panel group container.

Props

class?
string
defaultSizes?
number[] — Default sizes for uncontrolled mode.
direction?
"horizontal" | "vertical" — Layout direction. Default: "horizontal".
onSizesChange?
(sizes: number[], details: ChangeDetails<PanelResizeReason>) => void — Called when panel sizes change.
sizes?
Accessor<number[]> — Controlled panel sizes as percentages.

children: Element

View source

PanelPropsinterface

Props for an individual resizable panel.

Props

class?
string
collapsible?
boolean — Whether the panel can collapse to 0 below minSize.
defaultSize?
number
maxSize?
number
minSize?
number — Size constraints for this panel.
order
number — Unique order index for this panel within the group.
ref?
(el: HTMLDivElement) => void
style?
string | CSSProperties

children: Element

View source

PanelResizeReasontype

Reason for a panel size change.

View source