Resizable

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

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

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

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 */ />