Components / Layout

FloatingPanel

A translucent panel floated over a full-bleed canvas at a corner: stacks with measured offsets, can fade while the pointer is in the centre (kept on hover, drag and focus), and tucks away with a touch toggle.

@ruckc/truss-ui Layout

Import

import { FloatingPanel } from '@ruckc/truss-ui';

Playground

Recipe: controls over a full-bleed canvas

Put the panels inside a positioned element that fills the space (a map, a visualisation). Panels with stack at the same anchor sit one under the next, offset by their measured heights, and follow when one grows or is tucked away. With autohide they fade while a mouse is in the middle of the canvas, and come back when it nears an edge, hovers a panel, or while a drag that started inside one is in progress or focus is within. The round button tucks a panel on touch screens (toggle="always" shows it everywhere). The surface is translucent with a blur, and turns opaque where blur is unsupported or reduced transparency is requested.

<div class="canvas" style="position: relative; height: 100vh">
  <FloatingPanel anchor="top-left" stack autohide title="Layers">…</FloatingPanel>
  <FloatingPanel anchor="top-left" stack autohide title="Settings">…</FloatingPanel>
</div>

API

This component takes no props.