Reference
Floating Panel
FloatingPanel, dressed in the paper-and-ink system: the shared popup vessel let loose — a draggable, resizable sheet whose header is the handle. The parts — Root, Trigger, Positioner, Content, Header, Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger, Body.
Trigger · Positioner · Content · Header · Body · Title · ResizeTrigger · DragTrigger · StageTrigger · CloseTrigger · Control
#Body
A styled part — no props of its own; it takes the anatomy's shared styling.
#CloseTrigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#Content
A styled part — no props of its own; it takes the anatomy's shared styling.
#Control
A styled part — no props of its own; it takes the anatomy's shared styling.
#DragTrigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#Header
A styled part — no props of its own; it takes the anatomy's shared styling.
#Positioner
A styled part — no props of its own; it takes the anatomy's shared styling.
#ResizeTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
axis | ResizeTriggerAxis | The axis of the resize handle |
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
allowOverflow | boolean | true | Whether the panel should be strictly contained within the boundary when dragging |
closeOnEscape | boolean | Whether the panel should close when the escape key is pressed | |
defaultOpen | boolean | false | The initial open state of the panel when rendered. Use when you don't need to control the open state of the panel. |
defaultPosition | Point | The initial position of the panel when rendered. Use when you don't need to control the position of the panel. | |
defaultSize | Size | The default size of the panel | |
dir | 'ltr' | 'rtl' | "ltr" | The document's text/writing direction. |
disabled | boolean | Whether the panel is disabled | |
draggable | boolean | true | Whether the panel is draggable |
finalFocusEl | () => HTMLElement | null | The element to receive focus when the panel closes | |
getAnchorPosition | (details: floatingPanel.AnchorPositionDetails) => Point | Function that returns the initial position of the panel when it is opened. If provided, will be used instead of the default position. | |
getBoundaryEl | () => HTMLElement | null | The boundary of the panel. Useful for recalculating the boundary rect when the it is resized. | |
gridSize | number | 1 | The snap grid for the panel |
id | string | The unique identifier of the machine. | |
ids | Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }> | The ids of the elements in the floating panel. Useful for composition. | |
initialFocusEl | () => HTMLElement | null | The element to receive focus when the panel opens | |
lockAspectRatio | boolean | Whether the panel is locked to its aspect ratio | |
maxSize | Size | The maximum size of the panel | |
minSize | Size | The minimum size of the panel | |
open | boolean | The controlled open state of the panel | |
persistRect | boolean | Whether the panel size and position should be preserved when it is closed | |
position | Point | The controlled position of the panel | |
resizable | boolean | true | Whether the panel is resizable |
restoreFocus | boolean | true | Whether to restore focus to the trigger element when the panel closes |
size | Size | The size of the panel | |
strategy | 'absolute' | 'fixed' | "absolute" | The strategy to use for positioning |
translations | floatingPanel.IntlTranslations | The translations for the floating panel. |
| Event | Payload |
|---|---|
exitComplete | — |
openChange | details: OpenChangeDetails |
update:open | open: boolean |
positionChange | details: PositionChangeDetails |
update:position | details: Point |
positionChangeEnd | details: PositionChangeDetails |
sizeChange | details: SizeChangeDetails |
update:size | details: Size |
sizeChangeEnd | details: SizeChangeDetails |
stageChange | details: StageChangeDetails |
#StageTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
stage | Stage | The stage of the panel |
#Title
A styled part — no props of its own; it takes the anatomy's shared styling.
#Trigger
A styled part — no props of its own; it takes the anatomy's shared styling.