Resizable Panel Group
Arrange panels with draggable resize handles.
Preview
Import
import { ResizablePanelGroup, ResizablePanel, Center, ResizableHandle } from "@sigil-ui/components";Usage
<ResizablePanelGroup orientation="horizontal" className="min-h-[calc(var(--s-grid-cell)*5)] w-full border border-[var(--s-border)]"><ResizablePanel><Center className="h-full">Editor</Center></ResizablePanel><ResizableHandle withHandle /><ResizablePanel><Center className="h-full">Preview</Center></ResizablePanel></ResizablePanelGroup>Sub-components
This component includes the following parts:
<ResizablePanel><ResizableHandle>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Direction of the panel layout. |
children | ReactNode | — | Panels separated by resize handles. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-duration-fast | Duration fast |
--s-primary | Primary |
--s-ring | Ring |
--s-radius-sm | Radius sm |
--s-surface | Surface |
--s-text-muted | Text muted |