Window
A non-modal draggable and resizable floating panel — like a desktop application window.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Window />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
32 tests across 6 files. Auto-generated from the test suite.
When to Use
- Display secondary content (logs, previews, tools) while the main page remains interactive.
- Create floating panels that users can reposition and resize to fit their workflow.
- Build desktop-like multi-window UIs in web applications.
Mobile (rc.49). Title-bar buttons (close, minimize, maximize) are now 44×44 px on touch screens (
h-11 w-11 sm:h-7 sm:w-7) and the resize handle corner expands to a 44×44 px tap target, making the window fully usable on mobile.
API Reference
Window
| Prop | Type | Default | Description |
|---|---|---|---|
| Open | bool | false | Whether the window is visible. Pair with OpenChanged for two-way binding; leave unbound for uncontrolled use (Escape/close-button clicks self-manage visibility). |
| Title | string | "" | Plain-text title shown in the title bar. Ignored when TitleContent is set. |
| TitleContent | RenderFragment? | — | Custom title bar content, overriding Title. Not shown in the minimized/maximized title bars, which always render plain Title. |
| ChildContent | RenderFragment? | — | The window's body content. |
| FooterContent | RenderFragment? | — | Optional content rendered in a bordered footer below the body. |
| Width | string | "480px" | Initial width as a CSS pixel value (e.g. "480px"). Defaults to "480px". Only read once on first open; live size afterward tracks user resizing. |
| Height | string | "360px" | Initial height as a CSS pixel value. Defaults to "360px". Only read once on first open; live size afterward tracks user resizing. |
| Resizable | bool | true | When true (default), shows the bottom-right resize handle and allows dragging it to resize the window. |
| Draggable | bool | true | When true (default), the title bar can be dragged to reposition the window. |
| ShowClose | bool | true | Shows the close button in the title bar. Default is true. Also gates whether Escape closes the window. |
| ShowMinimize | bool | true | Shows the minimize button in the title bar. Default is true. |
| ShowMaximize | bool | true | Shows the maximize button in the title bar. Default is true. |
| InitialX | string? | — | Initial horizontal position as a CSS pixel value. Defaults to 80px when unset. Only read once on first open; clamped to stay within the viewport. |
| InitialY | string? | — | Initial vertical position as a CSS pixel value. Defaults to 80px when unset. Only read once on first open; clamped to stay within the viewport. |
| Class | string? | — | Additional CSS classes merged onto the root window element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes are splatted onto the root window element. |
Events
| OpenChanged | EventCallback<bool> | Raised when the window is closed (Escape, close button) or reopened. |