Soenneker.Blazor.Floating.Windows 4.0.244

<img src="https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png" alt="Logo" width="48"/> Soenneker.Blazor.Floating.Windows

Modern, customizable floating windows for Blazor

? Features

• ?? Draggable & Resizable � Move and resize windows with smooth, modern UX
• ?? Fully Customizable � Colors, fonts, borders, shadows, and more
• ?? Custom theming � Built-in typed support
• ??? Multiple Windows � Manage, stack, and focus with z-index
• ?? Responsive � Works on desktop and mobile
• ? Accessible � ARIA labels, keyboard navigation
• ? Event Callbacks � React to show, hide, drag, resize, and more

?? Installation

dotnet add package Soenneker.Blazor.Floating.Windows

// Program.cs
using Soenneker.Blazor.Floating.Windows.Registrars;
builder.Services.AddFloatingWindowAsScoped();

// _Imports.razor
@using Soenneker.Blazor.Floating.Windows

??? Basic Usage

<FloatingWindow Title="My Window" Width="400" Height="300">
    <div>
        <h3>Hello World!</h3>
        <p>This is a floating window with your content.</p>
        <button @onclick="() => window?.Close()">Close</button>
    </div>
</FloatingWindow>

?? Theming & Styling

Built-in themes:

<FloatingWindow StyleOptions="FloatingWindowStyleOptions.DefaultLight">...</FloatingWindow>
<FloatingWindow StyleOptions="FloatingWindowStyleOptions.DefaultDark">...</FloatingWindow>
<FloatingWindow StyleOptions="FloatingWindowStyleOptions.DemoTheme">...</FloatingWindow>

Custom styling:

<FloatingWindow StyleOptions="new FloatingWindowStyleOptions
{
    BackgroundColor = "#f8f9fa",
    BorderColor = "#dee2e6",
    BorderRadius = "12px",
    TitleBarBackgroundColor = "#007bff",
    TitleBarTextColor = "#ffffff",
    CloseButtonTextColor = "#ffffff",
    CloseButtonHoverBackgroundColor = "rgba(255, 255, 255, 0.2)",
    CustomClass = "my-custom-window",
    CustomStyles = new Dictionary<string, string>
    {
        ["backdrop-filter"] = "blur(10px)",
        ["border"] = "2px solid #007bff"
    }
}">...</FloatingWindow>

?? Advanced Example

<FloatingWindow @ref="myWindow"
                Title="Advanced Window"
                Width="500"
                Height="400"
                InitialX="100"
                InitialY="100"
                Draggable="true"
                Resizable="true"
                ShowCloseButton="true"
                ShowTitleBar="true"
                CenterOnShow="true"
                ConstrainToViewport="true"
                OnShow="OnWindowShow"
                OnHide="OnWindowHide"
                OnDragStart="OnDragStart"
                OnDragEnd="OnDragEnd">
    <div class="window-content">
        <h3>Advanced Features</h3>
        <p>This window demonstrates all the available features.</p>
        <div class="controls">
            <button @onclick="() => myWindow?.SetPosition(200, 200)">Move to (200,200)</button>
            <button @onclick="() => myWindow?.SetSize(600, 500)">Resize to 600x500</button>
            <button @onclick="() => myWindow?.BringToFront()">Bring to Front</button>
        </div>
    </div>
</FloatingWindow>

@code {
    private FloatingWindow? myWindow;
    private void OnWindowShow() => Console.WriteLine("Window shown!");
    private void OnWindowHide() => Console.WriteLine("Window hidden!");
    private void OnDragStart() => Console.WriteLine("Dragging started!");
    private void OnDragEnd() => Console.WriteLine("Dragging ended!");
}

?? API Overview

Properties

Events

Methods