# Floating Panel A draggable, resizable floating panel with minimize/maximize controls. ```svelte Open Panel Floating Panel

This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing from the bottom-right corner.

``` ## Size Constraints Use the `minSize` and `maxSize` props to set size constraints on the Floating Panel. ```svelte Open Panel Floating Panel

This panel has size constraints applied: minimum 300x200 pixels and maximum 900x600 pixels.

Try resizing from the bottom-right corner - the panel will respect these boundaries.

 ``` ## Controlled Control the open state and size of the Floating Panel with your own state. ```svelte
(open = details.open)} {size} onSizeChange={(details) => (size = details.size)}> Controlled Panel

This panel's open state and size are controlled via the inputs above.

Try changing the values or resizing/closing the panel to see the inputs update.

 ``` ## Anchor Position Position the panel relative to another element using the `defaultPosition` prop. ```svelte
{ if (!ctx.triggerRect) return { x: 0, y: 0 }; return { x: ctx.triggerRect.x + ctx.triggerRect.width / 2, y: ctx.triggerRect.y + ctx.triggerRect.height / 2, }; }} > Open Panel Anchored Panel

This panel is centered in the viewport using getAnchorPosition.

The position is calculated based on the boundary rectangle.
``` ## Resize Triggers Add resize triggers on all sides and corners of the Floating Panel using the `axis` prop. ```svelte Open Panel Floating Panel

This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing from the bottom-right corner.

``` ## Disable Dragging Disable dragging by setting the `draggable` prop to `false`. The panel will remain in a fixed position but can still be resized. ```svelte Open Panel Fixed Position Panel

This panel cannot be dragged - the position is fixed.

However, it can still be resized from the bottom-right corner.

 ``` ## Disable Resizing Disable resizing by setting the `resizable` prop to `false`. The panel will have a fixed size but can still be dragged. ```svelte Open Panel Fixed Size Panel

This panel cannot be resized.

Try dragging the edges - they won't respond.

 ``` ## Direction Set the text direction (`ltr` or `rtl`) using the `dir` prop. ```svelte Open Panel Floating Panel

This is a floating panel with right-to-left (RTL) direction.

You can drag it from the header or resize it from the bottom-right corner.

 ``` ## Anatomy Here's an overview of how the Floating Panel component is structured in code: ```svelte ``` ## API Reference