Window

Community Component — a draggable, resizable window with a title bar and controls, wrapping @gfazioli/mantine-window. Drag, resize, collapse, and live examples.

{% window %} is a draggable, resizable window with a title bar and window controls (close, collapse, and a tools menu). Grab the header to move it, drag any edge or corner to resize it, and collapse it to just the title bar. The block body is the window content.

A Community Component — wraps Window by gfazioli, MIT licensed, npm @gfazioli/mantine-window.

This is a different component from the Mantine-core floatingwindow builtin, which is a trigger-opened titled card. By default this window sits inside the page flow (in a relative host) so the docs stay readable; pass withinPortal=true to float it over the whole viewport instead.

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

Demonstrations

A basic window

The block body is the window content; title fills the header. Drag the header to move it and any edge or corner to resize it.

{% window title='Readme' %}
Drag me by the header, or grab an edge to resize.

The body renders as **Markdown**, so you can use the usual formatting here.
{% endWindow %}

Constrained drag and resize

draggable limits how the window moves (none, window, header, or both) and resizable limits how it resizes (none, vertical, horizontal, or both). Here it can only be moved by its header and only resized horizontally.

{% window title='Header-drag, horizontal-resize' draggable='header' resizable='horizontal' %}
This window only moves by its title bar and only grows sideways.
{% endWindow %}

Sizing and styling

Seed the initial geometry with width and height, tint the chrome with color, and set the radius and shadow.

{% window title='Styled' color='grape' radius='lg' shadow='xl' width=360 height=220 %}
A larger, rounded, grape-tinted window.
{% endWindow %}

Trimming the controls

Turn off the controls you don’t need — here only the close button stays, with the collapse and tools buttons removed.

{% window title='Just a close button' withCollapseButton=false withToolsButton=false %}
A minimal window chrome.
{% endWindow %}

With other components

The body renders as Markdown, so a window can hold any other component. Here it wraps a badge and a text block.

{% window title='Release notes' width=380 %}
{% badge color='teal' %}v2.0{% endBadge %}

{% text %}A short changelog lives inside the draggable window.{% endText %}
{% endWindow %}

Attributes

Omit any attribute to take its default. Bare flags (e.g. withinPortal) become =true.

CSS Selector

The window renders inside an island wrapper you can target in custom CSS:

[data-aardvark-island="Window"] {
  /* your overrides */
}

The package also exposes CSS variables on the window root — --window-background, --window-radius, and --window-shadow — which you can set through the attr style passthrough below.

Injecting Attributes

Pass attr={…} to forward raw HTML attributes (data attributes, ARIA, inline style) straight onto the rendered element — handy for hooks your own CSS or scripts key off, or for setting the package’s CSS variables.