Components
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.
#Basic usage
Notes
<script setup lang="ts">
import { minus, x } from "@bysages/icons";
import { FloatingPanel, Icon } from "@bysages/vue";
const axes = ["n", "e", "s", "w", "ne", "se", "sw", "nw"] as const;
</script>
<template>
<FloatingPanel.Root>
<FloatingPanel.Trigger>Open panel</FloatingPanel.Trigger>
<FloatingPanel.Positioner>
<FloatingPanel.Content>
<!-- The drag trigger is the header's own box — the blank middle
of the bar must tow the sheet, not just the title text. -->
<FloatingPanel.DragTrigger>
<FloatingPanel.Header>
<FloatingPanel.Title>Notes</FloatingPanel.Title>
<FloatingPanel.Control>
<FloatingPanel.StageTrigger stage="minimized">
<Icon :glyph="minus" />
</FloatingPanel.StageTrigger>
<FloatingPanel.StageTrigger stage="maximized">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 9V4h5M20 15v5h-5" />
</svg>
</FloatingPanel.StageTrigger>
<FloatingPanel.CloseTrigger>
<Icon :glyph="x" />
</FloatingPanel.CloseTrigger>
</FloatingPanel.Control>
</FloatingPanel.Header>
</FloatingPanel.DragTrigger>
<FloatingPanel.Body> Drag the header to move; pull an edge to resize. </FloatingPanel.Body>
<FloatingPanel.ResizeTrigger v-for="axis in axes" :key="axis" :axis="axis" />
</FloatingPanel.Content>
</FloatingPanel.Positioner>
</FloatingPanel.Root>
</template>
#Props
#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. |
#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.