Window
A non-modal draggable and resizable floating panel — like a desktop application window.
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
| Property | Type | Default | Description |
|---|---|---|---|
| Open | bool | false | Controls whether the window is visible. Use @bind-Open for two-way binding. |
| Title | string | "" | Text shown in the title bar. |
| TitleContent | RenderFragment? | null | Custom title bar content (replaces Title text). |
| ChildContent | RenderFragment? | null | Body content of the window. |
| FooterContent | RenderFragment? | null | Optional footer content rendered below the body. |
| Width | string | "480px" | Initial width as a CSS pixel value. |
| Height | string | "360px" | Initial height as a CSS pixel value. |
| Draggable | bool | true | Enables pointer-based drag via the title bar. |
| Resizable | bool | true | Shows a resize handle in the bottom-right corner. |
| ShowClose | bool | true | Shows a close button in the title bar. |
| ShowMinimize | bool | true | Shows a minimize button that collapses to title bar only. |
| ShowMaximize | bool | true | Shows a maximize button that expands to fill most of the viewport. |
| InitialX | string? | null | Initial left position in pixels (defaults to 80px). |
| InitialY | string? | null | Initial top position in pixels (defaults to 80px). |