Floating panel
A surface floating over a canvas, with a drag edge — an example to copy, not a component.
Q-1058 · Ashfall Reach
Drag the left edge to resize — 220px.
Usage
There is no floating panel to import. A surface that floats over a canvas, a map or a graph, with
an edge to drag, is a composition: a positioned div with Popover's surface, and a pointer handler
on a separator. The example above is the whole of it — copy it into your product and change what
your canvas needs.
It used to ship as FloatingPanel and FloatingPanelResizeHandle. No product called it, and the
name was Ark's for a different thing: Ark's floating-panel is a machine with a drag handle, a stage,
minimise and maximise, which Shark wraps under the same name. A component with no call site is an
example (Admission), and the
name stays free for the machine the day something needs it.
What it does
- The caller owns where it floats. It sets no position of its own; place it with
className—absolute inset-y-2 end-2over a relative parent. - The surface is
Popover's, at its radius and shadow, translucent and blurred because the reader is still looking at what is underneath. - The drag edge is a
separator,aria-orientation="vertical", on the panel's start, and the width is clamped between a minimum and a maximum. Move it to the end by putting it last and growing the panel as the pointer moves towards the end.