Resizable

Accessible resizable panel groups and layouts with keyboard support.

Usage


import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@abbyyproduct/ui/component/resizable';


<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Examples

Default

One

Two

Three

Vertical

Use the direction prop to set the direction of the resizable panels.

Header

Content

Handle

You can set or hide the handle by using the withHandle prop on the ResizableHandle component.

Sidebar

Content