FloatingWindow

The built-in floatingwindow tag — a draggable titled panel you can grab by its header and move around. Usage, options, and a live example.

A built-in tag for a draggable floating panel — a titled window that opens over the page and floats above your content; grab its header to move it around the viewport. It’s a handy container for a help bubble, a mini-map, or any side panel the reader can reposition. A trigger button opens it (set its text with triggerLabel), then set the header text with title, size it with width, and toggle the close button and border with withCloseButton and withBorder.

Use it as {% floatingwindow %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'floatingwindow', …).

Demonstrations

Click the trigger to open a titled window that floats over the page — grab its header and drag it around:

A borderless window without a close button

shadow and radius restyle the card; withCloseButton=false and withBorder=false strip the chrome for a lighter panel:

With other components

The body is ordinary Markdown, so a window can hold richer content — here a button inside a draggable help panel:

Attributes

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="FloatingWindow"], or through the Mantine Styles API classes. The window mounts on the client and exists only while it is open. The relevant classes:

/* Every rendered FloatingWindow carries this island marker */
[data-aardvark-island="FloatingWindow"] { }

/* Mantine Styles API classes */
.mantine-FloatingWindow-root { }

/* The demo adds these to the title bar */
.aardvark-fw-bar { }
.aardvark-fw-close { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert: