MudBlazor - Blazor Component Library

Note

The Dialog is dependant on IDialogService and MudDialogProvider

Check the Installation page for instructions regarding default setup.

Usage

Suppose you define a MudDialog in TermsOfServiceDialog.razor. To show the dialog you simply call:

DialogService.Show<TermsOfServiceDialog>("Terms");

The advantage of having the dialog in its own Razor component is obviously the ability to reuse it throughout your code-base. You can pass parameters to your dialog on show which allow you to load the dialog with custom data.

Note: Even though it is technically possible to show any razor component as a dialog it is highly recommended to use a <MudDialog> as the top-level of your dialogs!

@inject IDialogService DialogService

<MudButton @onclick="OpenDialogAsync" Variant="Variant.Filled" Color="Color.Primary">
    Open Simple Dialog
</MudButton>

@code {

    private Task OpenDialogAsync()
    {
        var options = new DialogOptions { CloseOnEscapeKey = true };

        return DialogService.ShowAsync<DialogUsageExample_Dialog>("Simple Dialog", options);
    }
}

Configuration

The dialog's default behavior can be changed in two ways, either globally with parameters in the <MudDialogProvider/> or pass down the DialogOptions class when you open the dialog.

Templating and Passing Simple Data

In this section, we will demonstrate how you can build one dialog and reuse it for multiple purposes.

@inject IDialogService DialogService


<MudButton @onclick="DeleteUserAsync" Variant="Variant.Filled" Color="Color.Error">Delete Records</MudButton>
<MudButton @onclick="ConfirmAsync" Variant="Variant.Filled" Color="Color.Success">Remove Email</MudButton>
<MudButton @onclick="DownloadAsync" Variant="Variant.Filled" Color="Color.Warning">Slow Computer</MudButton>

@code {

    private Task DeleteUserAsync()
    {
        var parameters = new DialogParameters<DialogTemplateExample_Dialog>
        {
            { x => x.ContentText, "Do you really want to delete these records? This process cannot be undone." },
            { x => x.ButtonText, "Delete" },
            { x => x.Color, Color.Error }
        };

        var options = new DialogOptions() { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };

        return DialogService.ShowAsync<DialogTemplateExample_Dialog>("Delete", parameters, options);
    }

    private Task ConfirmAsync()
    {
        var parameters = new DialogParameters<DialogTemplateExample_Dialog>
        {
            { x => x.ContentText, "Are you sure you want to remove thisguy@emailz.com from this account?" },
            { x => x.ButtonText, "Yes" },
            { x => x.Color, Color.Success }
        };

        return DialogService.ShowAsync<DialogTemplateExample_Dialog>("Confirm", parameters);
    }

    private Task DownloadAsync()
    {
        var parameters = new DialogParameters<DialogTemplateExample_Dialog>
        {
            { x => x.ContentText, "Your computer seems very slow, click the download button to download free RAM." },
            { x => x.ButtonText, "Download" },
            { x => x.Color, Color.Info }
        };

        return DialogService.ShowAsync<DialogTemplateExample_Dialog>("Slow Computer Detected", parameters);
    }
}