Resizable Panels

Basic resizable panels example demonstrating core behavior.

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

Examples

import * as ResizablePanels from "@solidiom/resizable-panels"

;<ResizablePanels.PanelGroup direction="horizontal" onSizesChange={(sizes) => console.log(sizes)}>
  <ResizablePanels.Panel order={0} defaultSize={60} minSize={20}>
    <div style={{ padding: 16 }}>Left panel</div>
  </ResizablePanels.Panel>

  <ResizablePanels.Handle index={0} />

  <ResizablePanels.Panel order={1} defaultSize={40} minSize={20}>
    <div style={{ padding: 16 }}>Right panel</div>
  </ResizablePanels.Panel>
</ResizablePanels.PanelGroup>

The Handle sits between two panels at the given index (separating panel[index] and panel[index+1]). Use collapsible on a Panel to allow it to shrink to 0%. The direction prop controls horizontal (default) or vertical layout.

Panel 1 — Drag the handle to resize

Panel 2 — This panel adjusts automatically

View source

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

export {
  PanelGroup,
  Panel,
  Handle,
  type PanelGroupProps,
  type PanelProps,
  type HandleProps,
} from "./panels"

export type {
  PanelGroupContextValue,
  PanelEntry,
  PanelConstraints,
  PanelResizeReason,
} from "./panels-context"