ResizablePanelGroup
Loading example…
Row or column of resizable panels. Put a ResizableHandle between every two panels.
Import
Section titled “Import”import { ResizablePanelGroup } from "@jcsoftdev/ui/containers";Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/resizable.
export const Default: Story = { render: () => <Demo direction="horizontal" /> };Source of the Storybook story.
| Prop | Type | Default | Description |
|---|---|---|---|
direction |
"horizontal" | "vertical" |
"horizontal" |
|
onLayout |
((sizes: number[]) => void) |
Called with the layout in percent after every change. | |
children * |
ReactNode |
* marks a required prop.
It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).
Storybook stories
Section titled “Storybook stories”Source
Section titled “Source”packages/ui/src/containers/resizable/resizable.tsx