FloatingPanel

A draggable and resizable floating panel.

Usage

A complex component designed for windows that users can interactively reposition and resize.

import { FloatingPanel } from "@elemnts-ui/react";

<FloatingPanel.Root>
  <FloatingPanel.Trigger />
  <FloatingPanel.Positioner>
    <FloatingPanel.Content>
      <FloatingPanel.Header>
        <FloatingPanel.DragTrigger />
        <FloatingPanel.Control>
          <FloatingPanel.StageTrigger />
          <FloatingPanel.CloseTrigger />
        </FloatingPanel.Control>
      </FloatingPanel.Header>
      <FloatingPanel.Body></FloatingPanel.Body>
      <FloatingPanel.ResizeTrigger axis="se" />
    </FloatingPanel.Content>
  </FloatingPanel.Positioner>
</FloatingPanel.Root>;

By wrapping the Title with DragTrigger, you enable the header to act as a handle for moving the panel. ResizeTrigger components can be added to any of the 8 cardinal and ordinal directions using the axis prop.

API Reference

FloatingPanelRoot

The root component that wraps the panel content and handles positioning.

Prop	Type	Default
allowOverflow	`boolean`	`true`
closeOnEscape	`boolean`	`undefined`
defaultOpen	`boolean`	`false`
defaultPosition	`Point`	`undefined`
defaultSize	`Size`	`undefined`
dir	`'ltr' \| 'rtl'`	`ltr`
disabled	`boolean`	`undefined`
draggable	`boolean`	`true`
finalFocusEl	`() => HTMLElement \| null`	`undefined`
getAnchorPosition	`(details: AnchorPositionDetails) => Point`	`undefined`
getBoundaryEl	`() => HTMLElement \| null`	`undefined`
gridSize	`number`	`undefined`
hideMode	`HideMode`	`display-none`
immediate	`boolean`	`undefined`
initialFocusEl	`() => HTMLElement \| null`	`undefined`
lockAspectRatio	`boolean`	`undefined`
maxSize	`Size`	`undefined`
minSize	`Size`	`undefined`
onExitComplete	`VoidFunction`	`undefined`
onOpenChange	`(details: OpenChangeDetails) => void`	`undefined`
onPositionChange	`(details: PositionChangeDetails) => void`	`undefined`
onPositionChangeEnd	`(details: PositionChangeDetails) => void`	`undefined`
onSizeChange	`(details: SizeChangeDetails) => void`	`undefined`
onSizeChangeEnd	`(details: SizeChangeDetails) => void`	`undefined`
onStageChange	`(details: StageChangeDetails) => void`	`undefined`
open	`boolean`	`undefined`
persistRect	`boolean`	`undefined`
position	`Point`	`undefined`
present	`boolean`	`undefined`
resizable	`boolean`	`true`
restoreFocus	`boolean`	`true`
size	`Size`	`undefined`
skipAnimationOnMount	`boolean`	`false`
strategy	`'absolute' \| 'fixed'`	`fixed`
translations	`IntlTranslations`	`undefined`
unmountOnExit	`boolean`	`false`

FloatingPanelTrigger

The trigger component that toggles the panel.

Prop	Type	Default
asChild	`boolean`	`false`

FloatingPanelPositioner

The positioner component that handles the panel's positioning.

Prop	Type	Default
asChild	`boolean`	`false`

FloatingPanelContent

The content component that wraps the panel's content.

Prop	Type	Default
asChild	`boolean`	`false`

FloatingPanelHeader

The header component that contains the panel's title and controls.

Prop	Type	Default
asChild	`boolean`	`false`

FloatingPanelDragTrigger

The trigger component that enables dragging the panel.

Prop	Type	Default
asChild	`boolean`	`false`

FloatingPanelControl

The control component that contains the panel's controls.

Prop	Type	Default
asChild	`boolean`	`false`

FloatingPanelStageTrigger

The trigger component that toggles the panel stage.

Prop	Type	Default
asChild	`boolean`	`false`
stage	`Stage`	`undefined`

FloatingPanelCloseTrigger

The trigger component that closes the panel.

Prop	Type	Default
asChild	`boolean`	`false`

FloatingPanelBody

The body component that contains the panel's main content.

Prop	Type	Default
asChild	`boolean`	`false`

FloatingPanelResizeTrigger

The trigger component that enables resizing the panel.

Prop	Type	Default
asChild	`boolean`	`false`
axis	`Axis`	`undefined`