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';| Name | Description | Type | Default |
|---|---|---|---|
| classNames | -- | {content?:string;handle?:string} | -- |
| defaultExpand | The default expand state of the panel | boolean | true |
| defaultSize | The default size of the panel | {width?:string|number;height?:string|number} | -- |
| destroyOnClose | Whether the panel should be destroyed when closed or not | boolean | false |
| expand | Whether the panel is expanded or not | boolean | -- |
| expandable | Whether the panel is expandable or not | boolean | true |
| fullscreen | -- | boolean | -- |
| handlerStyle | The style of the panel handler | CSSProperties | -- |
| hanlderStyle | -- | {} | -- |
| headerHeight | -- | number | -- |
| maxHeight | -- | number | -- |
| maxWidth | -- | number | -- |
| minHeight | The minimum height of the panel | number | -- |
| minWidth | The minimum width of the panel | number | -- |
| mode | The mode of the panel, fixed or float | "fixed"|"float" | "fixed" |
| onExpandChange | Callback function when the expand state of the panel changes | (expand:boolean)=>void | -- |
| onSizeChange | Callback function when the size of the panel changes | (delta:import("/node_modules/re-resizable/lib/index").NumberSize,size?:import("/node_modules/re-resizable/lib/index").Size)=>void | -- |
| onSizeDragging | Callback function when the panel is being resized | (delta:import("/node_modules/re-resizable/lib/index").NumberSize,size?:import("/node_modules/re-resizable/lib/index").Size)=>void | -- |
| pin | Whether the panel can be pinned or not | boolean | true |
| placement | The placement of the panel, right, left, top or bottom | "top"|"bottom"|"left"|"right" | (required) |
| resize | Whether the panel can be resized or not | {bottom?:boolean;bottomLeft?:boolean;bottomRight?:boolean;left?:boolean;right?:boolean;top?:boolean;topLeft?:boolean;topRight?:boolean}|boolean | true |
| showHandlerWhenUnexpand | -- | boolean | -- |
| showHandlerWideArea | Whether the panel handler should be shown when unexpanded or not | boolean | true |
| size | The size of the panel | {width?:string|number;height?:string|number} | -- |