BlazorOverlay 1.0.0

BlazorOverlay

A blazor library to display overlays (dialog, loading indicators), without any js or css file.

Why

For large projects you have many existing good libraries for this purpose. For small projects you may expect something light-weight and portable. This is it. BlazorOverlay does not add javascript or css files to your project, and only requires simple setup (or none).

Installation

Option 1: Nuget

Search and install "BlazorOverlay" in Nuget Package Manager.

Option 2: Project Referrence

Download or Git-Clone this project, then referrence it in your Blazor project.

Usage

Dependancy Injection (recommended)

add service at startup:

public static void Main(string[] args)
{
    ...
    builder.Services.AddScoped<BlazorOverlay.Overlay>();
    ...
}

and then in a razor page:

@rendermode InteractiveServer
@inject BlazorOverlay.Overlay overlay

<div style="padding:20px;display:flex; flex-direction:column; gap:10px;">
        <div>
        <button @onclick="ShowLoader">Show Loader (click to close)</button>
    </div>
    <div>
        <button @onclick="ShowSuccess">Show Success (auto close)</button>
    </div>
    <div>
        <button @onclick="ShowMessage_HasCloseButton">Show Message (with close button)</button>
    </div>
    <div>
        <button @onclick="ShowMessage_NoCloseButton">Show Message (without close button)</button>
    </div>
    <div>
        <button @onclick="ShowMessage_AutoClose">Show Message (auto close)</button>
    </div>
</div>
@code {
    private async Task ShowMessage_HasCloseButton()
    {
        await overlay.ShowMessage(
            "A network issue is encountered, please try again.",
            hasCloseButton: true
        );
    }
    private async Task ShowMessage_NoCloseButton()
    {
        await overlay.ShowMessage(
            "A network issue is encountered, please refresh the page.",
            hasCloseButton: false
        );
    }
    private async Task ShowMessage_AutoClose()
    {
        var dialogRef = await overlay.ShowMessage(
            "A network issue is encountered.\n This message will disappeat in 4 seconds。", 
            hasCloseButton: true
        );
        await Task.Delay(4000);
        await overlay.Dismiss(dialogRef);
    }
    private async Task ShowLoader()
    {
        var dialogRef = await overlay.ShowLoader();
        await Task.Delay(1500);
        await overlay.ShowSuccess(dialogRef);
    }
    private async Task ShowSuccess()
    {
        await overlay.ShowSuccess(2000);
    }
}

Ad-hoc

Simply initialize an instance in page and just use it:

@inject IJSRuntime js
<button @onclick="ShowMessage_NoDI">Show Message (No DI)</button>
@code {
    private async Task ShowMessage_NoDI()
    {
        var overlay = new BlazorOverlay.Overlay(js);
        await overlay.ShowMessage("Show a message without using dependancy injection.");
    }
}

Source Code

This project is open sourced at GitHub.

Author

Fan Xing Hua (Miles)

License

Source code is licensed under MIT.