1. framework components
  2. ›
  3. floating panel

Floating Panel

A draggable, resizable floating panel with minimize/maximize controls.

Size Constraints

Use the minSize and maxSize props to set size constraints on the Floating Panel.

Controlled

Control the open state and size of the Floating Panel with your own state.

Anchor Position

Position the panel relative to another element using the defaultPosition prop.

Resize Triggers

Add resize triggers on all sides and corners of the Floating Panel using the axis prop.

Disable Dragging

Disable dragging by setting the draggable prop to false . The panel will remain in a fixed position but can still be resized.

Disable Resizing

Disable resizing by setting the resizable prop to false . The panel will have a fixed size but can still be dragged.

Direction

Set the text direction ( ltr or rtl ) using the dir prop.

Anatomy

Here’s an overview of how the Floating Panel component is structured in code:

tsx 
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<FloatingPanel>
			<FloatingPanel.Trigger />
			<Portal>
				<FloatingPanel.Positioner>
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title />
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger />
									<FloatingPanel.CloseTrigger />
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body />
						<FloatingPanel.ResizeTrigger />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

API Reference

Root

Prop Default Type
children — ReactNode

ids — Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }> | undefined

The ids of the elements in the floating panel. Useful for composition.
translations — IntlTranslations | undefined

The translations for the floating panel.
strategy "fixed" "absolute" | "fixed" | undefined

The strategy to use for positioning
allowOverflow true boolean | undefined

Whether the panel should be strictly contained within the boundary when dragging
open — boolean | undefined

The controlled open state of the panel
defaultOpen false boolean | undefined

The initial open state of the panel when rendered. Use when you don't need to control the open state of the panel.
draggable true boolean | undefined

Whether the panel is draggable
resizable true boolean | undefined

Whether the panel is resizable
size — Size | undefined

The size of the panel
defaultSize — Size | undefined

The default size of the panel
minSize — Size | undefined

The minimum size of the panel
maxSize — Size | undefined

The maximum size of the panel
position — Point | undefined

The controlled position of the panel
defaultPosition — Point | undefined

The initial position of the panel when rendered. Use when you don't need to control the position of the panel.
getAnchorPosition — ((details: AnchorPositionDetails) => Point) | undefined

Function that returns the initial position of the panel when it is opened. If provided, will be used instead of the default position.
lockAspectRatio — boolean | undefined

Whether the panel is locked to its aspect ratio
closeOnEscape — boolean | undefined

Whether the panel should close when the escape key is pressed
getBoundaryEl — (() => HTMLElement | null) | undefined

The boundary of the panel. Useful for recalculating the boundary rect when the it is resized.
initialFocusEl — (() => HTMLElement | null) | undefined

Element to receive focus when the panel is opened. By default, the first focusable element in the content is focused.
finalFocusEl — (() => HTMLElement | null) | undefined

Element to receive focus when the panel is closed. By default, the trigger element is focused.
restoreFocus true boolean | undefined

Whether to restore focus to the trigger when the panel is closed.
disabled — boolean | undefined

Whether the panel is disabled
onPositionChange — ((details: PositionChangeDetails) => void) | undefined

Function called when the position of the panel changes via dragging
onPositionChangeEnd — ((details: PositionChangeDetails) => void) | undefined

Function called when the position of the panel changes via dragging ends
onOpenChange — ((details: OpenChangeDetails) => void) | undefined

Function called when the panel is opened or closed
onSizeChange — ((details: SizeChangeDetails) => void) | undefined

Function called when the size of the panel changes via resizing
onSizeChangeEnd — ((details: SizeChangeDetails) => void) | undefined

Function called when the size of the panel changes via resizing ends
persistRect — boolean | undefined

Whether the panel size and position should be preserved when it is closed
gridSize 1 number | undefined

The snap grid for the panel
onStageChange — ((details: StageChangeDetails) => void) | undefined

Function called when the stage of the panel changes
dir "ltr" "ltr" | "rtl" | undefined

The document's text/writing direction.
getRootNode — (() => ShadowRoot | Node | Document) | undefined

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

Provider

Prop Default Type
value — FloatingPanelApi<PropTypes>

children — ReactNode

Context

Prop Default Type
children — (floatingPanel: FloatingPanelApi<PropTypes>) => ReactNode

Trigger

Prop Default Type
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

Positioner

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Content

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

DragTrigger

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Header

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Title

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Control

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

StageTrigger

Prop Default Type
stage — Stage

The stage of the panel
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

CloseTrigger

Prop Default Type
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

Body

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ResizeTrigger

Prop Default Type
axis — ResizeTriggerAxis

The axis of the resize handle
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself
View page on GitHub