Persilsoft.SweetAlert.Blazor 1.0.1

SweetAlert Blazor

Blazor implementation of SweetAlert (a popular Javascript modal popup library)

Example

First, you need to register the service.

global using ServiceCollectionExtensions;

builder.Services.AddSweetAlertService();

Now you can use it.

@page "/sweetalertdemo"
@using Persilsoft.SweetAlert.Blazor

<PageTitle>SweetAlert Demo</PageTitle>

<h1>SweetAlert Demo</h1>
<hr />
<button class="btn btn-primary" @onclick=ShowSimpleMessage>Show a simple message</button>
<button class="btn btn-success" @onclick=ShowSimpleMessageAndButton>Show a simple message with button</button>
<button class="btn btn-info" @onclick=ShowWithHeader>Show a message and header</button>
<button class="btn btn-warning" @onclick=ShowWithHeaderIconAndButton>Show a message, title, icon and button</button>
<button class="btn btn-danger" @onclick=Confirm>Show confirm</button>

<div class="m-1">
    @message
</div>

@code {
    private string message;

    [Inject]
    public SweetAlertService SweetAlertService { get; set; }

    private async void ShowSimpleMessage()
    {
        await SweetAlertService.ShowAlert(new AlertArgs
            {
                Text = "Press to ESC",
                CloseOnClickOutside = false
            });
    }

    private async void ShowSimpleMessageAndButton()
    {
        await SweetAlertService.ShowAlert(new AlertArgs
            {
                Text = "this is a modal message",
                Button = new { Text = "close" },
                CloseOnClickOutside = false,
                CloseOnEsc = false
            });
    }

    public async void ShowWithHeader()
    {
        await SweetAlertService.ShowAlert(new AlertArgs
            {
                Title = "The title",
                Text = "This is a message",
            });
    }

    public async void ShowWithHeaderIconAndButton()
    {
        await SweetAlertService.ShowAlert(new AlertArgs
            {
                Title = "Error",
                Text = "This is a danger message",
                Icon = Icon.Error,
                DangerMode = true,
                Button = new { Text = "Close" }
            });
    }

    private async void Confirm()
    {
        var Parameters = new ConfirmArgs(
            title: "�Eliminar la pizza?",
            text: "�Deseas eliminar la pizza Margherita de la orden",
            icon: Icon.Warning,
            abortText: "No, quiero dejarla en mi orden",
            confirmText: "Si, quiero eliminar la pizza",
            dangerMode: true);

        var Result = await SweetAlertService.ConfirmAsync(Parameters);
        if (Result)
        {
            message = "Eliminar pizza";
        }
        else
        {
            message = "No eliminar la pizza";
        }

        StateHasChanged();
    }
}