Skip to documentation
UI

DraggablePanel

DraggablePanel is a panel that can be dragged and resized. It supports pinning, fixed or floating mode, placement in four directions, minimum width and height, expandable or not, default and customizable size, and destroy on close. It also provides a handler for expanding and collapsing the panel.

import { DraggablePanel } from '@lobehub/ui';
NPMSourceEdit
Layout

Default

Loading preview

Layout

Loading preview

Stable Layout

Loading preview

Drag to Collapse

Loading preview

APIs

DraggablePanel properties
backgroundColor
string
classNames
{ content?: string; handle?: string; }
collapseThreshold
number

Preview a collapsed panel while resizing at or below this size, then commit the collapsed state on pointer release. Dragging back above the threshold before release restores the panel. Applies to width for left/right placement and height for top/bottom placement. Omit to disable drag-to-collapse behavior.

defaultExpand
boolean

Defaults to true.

defaultSize
Partial<Size>
destroyOnClose
boolean
expand
boolean
expandable
boolean

Defaults to true.

fullscreen
boolean
headerHeight
number

Defaults to 0.

maxHeight
number
maxWidth
number
minHeight
number
minWidth
number
mode
'fixed' | 'float'

Defaults to "fixed".

onExpandChange
(expand: boolean) => void
onSizeChange
(delta: NumberSize, size?: Size) => void
onSizeDragging
(delta: NumberSize, size?: Size) => void
pin
boolean

Defaults to true.

placementRequired
PlacementType

Defaults to "right".

resize
false | true | { bottom?: boolean; bottomLeft?: boolean; bottomRight?: boolean; left?: boolean; right?: boolean; top?: boolean; topLeft?: boolean; topRight?: boolean; }
showBorder
boolean

Whether to show border

Defaults to true.

showHandleHighlight
boolean

Defaults to false.

showHandleWhenCollapsed
boolean
showHandleWideArea
boolean

Defaults to true.

size
Partial<Size>
stableLayout
boolean

Use two-layer container layout to keep content layout stable when collapsed/expanded.

Defaults to false.

styles
{ content?: CSSProperties; handle?: CSSProperties; }

Also accepts all native HTML and ARIA attributes.