Skip to content

stavroskasidis/BlazorDialog

Repository files navigation

Blazor Dialog

Build status Nuget (with prereleases) Nuget Donate

Dialog component as a service for Blazor!

demo-img

Features

  • Call a dialog procedurally as a service and await for the result !
  • Open any component as a dialog.
  • Can use dialogs as normal components (if you don't want to use as a service).
  • Build-in modal dialog with optional helper components (Header, Body, Footer).
  • Option to use completely custom markup/css (without using the build-in opinionated css and html).

Samples / Demo

You can find code samples and demos here.

Installation

1. Add the nuget package in your Blazor project

> dotnet add package BlazorDialog

OR

PM> Install-Package BlazorDialog

Nuget package page can be found here.

2. Add the following line in your Blazor project in either Startup.cs (blazor server-side) or Program.cs (blazor wasm)

- Blazor server-side: Startup.cs

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        // other code
        services.AddBlazorDialog();
        // other code
    }
}

- Blazor wasm: Program.cs

public class Program
{
    public static async Task Main(string[] args)
    {
       // other code
        builder.Services.AddBlazorDialog();
        // other code
    }
}

3. Add the following line in your _Imports.razor

@using BlazorDialog

4. Add the following line in your MainLayout.razor or App.razor (must be rendered once in a central spot)

<DialogOutput/>

5. Reference the css file

Add the following static file references in your _Host.cshtml (server-side blazor) or in your index.html (client-side blazor). Make sure that there is a call to app.UseStaticFiles(); in your server project's Startup.cs.

<link href="_content/BlazorDialog/styles.min.css" rel="stylesheet" />
<script src="_content/BlazorDialog/blazorDialog.min.js"></script>

⚠️ Breaking changes ⚠️

Upgrading from 3.2 to 4.0
  • It is required to add a static file reference to the new javascript file.
Upgrading from 0.3 to 1.0
  • Removed PreventShow and PreventHide from OnBeforeShow and OnBeforeHide respectively. Too many cases where infinite loops could happen.

Release Notes

4.0
  • A new javascript file is required to be loaded (see breaking changes).
  • New feature: Allow closing the dialog with a key press (escape by default).
3.2
  • Fix for a bug when the same dialog is presented consecutively, never returning result. Contributed by thanoskapsalis.
3.1
  • Added ForceAllowNavigation and ForcePreventNavigation methods to the Dialog component to allow/prevent navigation regardless of the PreventNavigation parameter.
3.0
  • Migrate to .NET 8.0
  • Add PreventNavigation option to prevent navigation when dialog is open.
2.3
  • Expose dialog options as cascading parameter when using ComponentAsDialog.
2.2
  • Fix for showing the same dialog with the dialog service more than once in the same async function.
  • Upgrade MS packages dependecy to 6.0.26
2.1
  • Minor fix for when returning null dialog results to non nullable result types.
2.0
  • New feature: ShowComponentAsDialog. Check demo app for examples.
  • Upgraded target framework to 6.0
1.6
  • Added a new size option: ExtraExtraLarge.
1.5
  • Added css class parameter to all helper components (header/body/footer).
1.4
  • Added css class parameter to dialog component.
1.3
  • Added base z-index parameter to dialog component.
1.2
  • Added fullscreen mode.
1.1
  • Added support for dialog-in-dialog.
1.0
  • Fixed an infinite loop bug with OnBeforeShow event.
  • Fixed css bugs.
  • Removed PreventShow and PreventHide from OnBeforeShow and OnBeforeHide respectively. Too many cases where infinite loops could happen.
0.3
  • Upgrated to 3.1.
  • Added new helper components: DialogHeader, DialogBody, DialogFooter
0.1
  • Initial release.