A floating panel the user can move, resize, minimize and maximize.
parentnonecloseOnEscape | boolean | false | Whether Escape, pressed inside the panel, closes it. |
defaultHeight | number | 300 | The panel's starting height, in pixels. |
defaultMaximized | boolean | false | Whether the panel starts maximized, when it isn't controlled. |
defaultMinimized | boolean | false | Whether the panel starts minimized, when it isn't controlled. |
defaultOpen | boolean | true | Whether the panel is shown at first, when it isn't controlled. |
defaultWidth | number | 360 | The panel's starting width, in pixels. |
defaultX | number | 40 | The panel's starting distance from the left edge of the viewport, in pixels. |
defaultY | number | 40 | The panel's starting distance from the top edge of the viewport, in pixels. |
isDraggable | boolean | true | Whether the panel can be moved, by its header or handle. |
isResizable | boolean | true | Whether the panel can be resized from its corner. |
labels | Partial<DraggableLabels> | – | Replaces the built-in text for this instance. See |
maxHeight | number | 600 | The tallest the panel can be resized to, in pixels. |
maximized | boolean | – | Whether the panel fills the viewport. Use with |
maxWidth | number | 800 | The widest the panel can be resized to, in pixels. |
minHeight | number | 160 | The shortest the panel can be resized to, in pixels. |
minimized | boolean | – | Whether the panel is minimized to its header. Use with |
minWidth | number | 240 | The narrowest the panel can be resized to, in pixels. |
onMaximizedChange | ((maximized: boolean) => void) | – | Called when the panel is maximized or restored. |
onMinimizedChange | ((minimized: boolean) => void) | – | Called when the panel is minimized or restored. |
onOpenChange | ((open: boolean) => void) | – | Called with |
onPositionChange | ((position: DraggablePosition) => void) | – | Called with the new position as the panel moves. |
onSizeChange | ((size: DraggableSize) => void) | – | Called with the new size as the panel is resized. |
open | boolean | – | Whether the panel is shown. Use with |
position | DraggablePosition | – | The panel's position. Use with |
resizeHandleProps | DraggableResizeHandleProps | – | Props for the built-in corner resize handle, such as a |
size | DraggableSize | – | The panel's size. Use with |
variant | "default"|"flat"|"expressive" | default | The visual style of the component. |
Accepts render, plus every native <div> attribute.
Accepts render, plus every native attribute of the element it renders.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native attribute of the element it renders.
Accepts render, plus every native attribute of the element it renders.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <span> attribute.