Components
Resizable
Draggable split panels with a resize handle.
Usage
import {
ResizablePanelGroup,
ResizablePanel,
ResizableHandle,
} from '@acronis-platform/ui-react';Resizable wraps react-resizable-panels.
ResizablePanelGroup lays out ResizablePanel children along an orientation
(horizontal or vertical), separated by a ResizableHandle the user drags.
The handle is themed by the --ui-resizable-* tokens.
Examples
A horizontal split (sidebar + content):
<ResizablePanelGroup orientation="horizontal">
<ResizablePanel defaultSize={40} minSize={20}>
Sidebar
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={60}>Content</ResizablePanel>
</ResizablePanelGroup>A vertical split (editor + preview):
<ResizablePanelGroup orientation="vertical">
<ResizablePanel defaultSize={60}>Editor</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={40}>Preview</ResizablePanel>
</ResizablePanelGroup>API Reference
ResizableHandle
Prop
Type
ResizablePanelGroup and ResizablePanel pass through the Group and Panel
props of react-resizable-panels (e.g. orientation, defaultSize, minSize,
maxSize, onResize). See the
react-resizable-panels API
for the full list.