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:

Source: Markdown

Source: Python

A lighter, borderless window

shadow and radius restyle the card; withBorder=false drops the outline for a lighter panel:

Source: Markdown

Source: Python

With other components

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

Source: Markdown

Source: Python

Attributes

Attribute	Values	Description
`triggerLabel`	string, default `Open window`	Text of the button that opens the window.
`title`	string	Header text shown in the draggable title bar.
`width`	integer (px), default `320`	Window width.
`shadow`	`xs`–`xl` (default `xl`)	Drop shadow.
`radius`	`xs`–`xl` or a number (default `md`)	Corner radius.
`withCloseButton`	bool, default `true`	Show the close button in the header. It’s the window’s only dismissal (there’s no backdrop to click, and Escape doesn’t close it), so if you turn it off the build re-enables it and warns.
`withBorder`	bool, default `true`	Draw a border around the window.

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 — onto the rendered window. The window exists only while it is open, so the attributes are applied when you open it — open this one and click it to run the handler. 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:

Source: Markdown

Source: Python