Blazor.Winbox 0.2.11

Blazor Winbox

Multiple Windows Library that wraps WinBox.js in Blazor Components.

Windows management and rendering processes were inspired by MudBlazor dialogs

GitHub repository

Compatibility

Only Blazor WASM (client-side) applications are currently supported. This library is not tested on Blazor Server applications.

Getting Started

Installation:

The Nuget package page can be found here

To install Blazor.Winbox from Nuget Gallery simply search for its name and install the latest version

Or using Package Manager run the following command

Install-Package Blazor.Winbox

Or using .NET CLI run the following command

dotnet add package Blazor.Winbox

Configurations:

• Import Blazor.Winbox by adding the following in _Imports.razor

@using Blazor.Winbox

• Register Blazor.Winbox Service in Program Class:

public static async Task Main(string[] args)
{
   //...omitted for brief
   builder.Services.AddBlazorWinbox();
}

• Add script references to index.html after Blazor script

<script src="_content/Blazor.Winbox/winbox.bundle.min.js"></script>
<script src="_content/Blazor.Winbox/BlazorWinbox.min.js"></script>

• Add the following component to your MainLayout.razor

<WindowProvider />

Open a window

Create a window component. Let's use Counter template as example:

<Window>

    <h1>Counter</h1>

    <p role="status">Current count: @currentCount</p>

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

</Window>

@code {

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Note that whole window content should be surrounded with <Window> Tag

To open a window, inject IWindowManager service and use Open<TComponent>() method:

//Use in razor
@inject IWindowManager windowManager
//OR in C# 
[Inject] public IWindowManager WindowManager { get; set; }

//Open a window
void OpenCounter(){
    IWindowReference windowReference = WindowManager.Open<Counter>();
}