Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# ResizableHandle

Draggable handle for resizing panels

## Example​

    import {
      ResizableHandle,
      ResizablePanel,
      ResizablePanelGroup,
    } from "@databricks/appkit-ui/react"

    export default function ResizableExample() {
      return (
        <ResizablePanelGroup
          direction="horizontal"
          className="max-w-md rounded-lg border md:min-w-[450px]"
        >
          <ResizablePanel defaultSize={50}>
            <div className="flex h-[200px] items-center justify-center p-6">
              <span className="font-semibold">One</span>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel defaultSize={50}>
            <ResizablePanelGroup direction="vertical">
              <ResizablePanel defaultSize={25}>
                <div className="flex h-full items-center justify-center p-6">
                  <span className="font-semibold">Two</span>
                </div>
              </ResizablePanel>
              <ResizableHandle />
              <ResizablePanel defaultSize={75}>
                <div className="flex h-full items-center justify-center p-6">
                  <span className="font-semibold">Three</span>
                </div>
              </ResizablePanel>
            </ResizablePanelGroup>
          </ResizablePanel>
        </ResizablePanelGroup>
      )
    }

## ResizableHandle​

Draggable handle for resizing panels

Source: `packages/appkit-ui/src/react/ui/resizable.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`disabled` | `boolean` |  | - | -
`hitAreaMargins` | `PointerHitAreaMargins` |  | - | -
`id` | `string | null` |  | - | -
`onBlur` | `(() => void)` |  | - | -
`onClick` | `(() => void)` |  | - | -
`onDragging` | `PanelResizeHandleOnDragging` |  | - | -
`onFocus` | `(() => void)` |  | - | -
`onPointerDown` | `(() => void)` |  | - | -
`onPointerUp` | `(() => void)` |  | - | -
`tagName` | `enum` |  | - | -
`withHandle` | `boolean` |  | - | -

### Usage​

    import { ResizableHandle } from '@databricks/appkit-ui';

    <ResizableHandle /* props */ />

## ResizablePanel​

Individual resizable panel within a panel group

Source: `packages/appkit-ui/src/react/ui/resizable.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`collapsedSize` | `number` |  | - | -
`collapsible` | `boolean` |  | - | -
`defaultSize` | `number` |  | - | -
`id` | `string` |  | - | -
`maxSize` | `number` |  | - | -
`minSize` | `number` |  | - | -
`onCollapse` | `PanelOnCollapse` |  | - | -
`onExpand` | `PanelOnExpand` |  | - | -
`onResize` | `PanelOnResize` |  | - | -
`order` | `number` |  | - | -
`tagName` | `enum` |  | - | -

### Usage​

    import { ResizablePanel } from '@databricks/appkit-ui';

    <ResizablePanel /* props */ />

## ResizablePanelGroup​

Container for resizable panel layout

Source: `packages/appkit-ui/src/react/ui/resizable.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`autoSaveId` | `string | null` |  | - | -
`direction` | `enum` | ✓ | - | -
`id` | `string | null` |  | - | -
`keyboardResizeBy` | `number | null` |  | - | -
`onLayout` | `PanelGroupOnLayout | null` |  | - | -
`storage` | `PanelGroupStorage` |  | - | -
`tagName` | `enum` |  | - | -

### Usage​

    import { ResizablePanelGroup } from '@databricks/appkit-ui';

    <ResizablePanelGroup /* props */ />