Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

SweetAlert popup component

Modal dialog box, mostly used to continue after inquiring during the action, or to display the execution result

Component usage introduction：

1. Inject the service SwalService

@inject SwalService SwalService

[Inject]
[NotNull]
private SwalService? SwalService { get; set; }

2. Call its instance api

var op = new SwalOption()
{
    Category = SwalCategory.Success,
    Title = "I am Title",
    Content = "I am Content",
    ShowClose = false
};
await SwalService.Show(op);

Basic usage

Call Swal by injecting the service to pop up a dialog

Demo

success

fail

warn

hint

doubt

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<SweetAlerts> Localizer
@inject SwalService SwalService

<div class="row g-3">
    <div class="col-4 align-self-center text-center">
        <div class="text-success">@Localizer["SweetAlertsNormalSuccess"]</div>
    </div>
    <div class="col-4">
        <div class="swal2-icon swal2-success">
            <div class="swal2-success-circular-line-left"></div>
            <span class="swal2-success-line-tip"></span><span class="swal2-success-line-long"></span>
            <div class="swal2-success-ring"></div><div class="swal2-success-fix"></div>
            <div class="swal2-success-circular-line-right"></div>
        </div>
    </div>
    <div class="col-4 align-self-center text-center">
        <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Success" OnClick="@(e => OnSwal(SwalCategory.Success))" />
    </div>
</div>
<div class="row g-3">
    <div class="col-4 align-self-center text-center">
        <div class="text-danger">@Localizer["SweetAlertsNormalFail"]</div>
    </div>
    <div class="col-4">
        <div class="swal2-icon swal2-error">
            <span class="swal2-x-mark">
                <span class="swal2-x-mark-line-left"></span>
                <span class="swal2-x-mark-line-right"></span>
            </span>
        </div>
    </div>
    <div class="col-4 align-self-center text-center">
        <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Danger" OnClick="@(e => OnSwal(SwalCategory.Error))" />
    </div>
</div>
<div class="row g-3">
    <div class="col-4 align-self-center text-center">
        <div class="text-warning">@Localizer["SweetAlertsNormalWarn"]</div>
    </div>
    <div class="col-4">
        <div class="swal2-icon swal2-warning"></div>
    </div>
    <div class="col-4 align-self-center text-center">
        <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Warning" OnClick="@(e => OnSwal(SwalCategory.Warning))" />
    </div>
</div>
<div class="row g-3">
    <div class="col-4 align-self-center text-center">
        <div class="text-info">@Localizer["SweetAlertsNormalHint"]</div>
    </div>
    <div class="col-4">
        <div class="swal2-icon swal2-info"></div>
    </div>
    <div class="col-4 align-self-center text-center">
        <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Info" OnClick="@(e => OnSwal(SwalCategory.Information))" />
    </div>
</div>
<div class="row g-3">
    <div class="col-4 align-self-center text-center">
        <div class="text-secondary">@Localizer["SweetAlertsNormalDoubt"]</div>
    </div>
    <div class="col-4">
        <div class="swal2-icon swal2-question"></div>
    </div>
    <div class="col-4 align-self-center text-center">
        <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Secondary" OnClick="@(e => OnSwal(SwalCategory.Question))" />
    </div>
</div>

@code {
    private Task OnSwal(SwalCategory cate) => SwalService.Show(new SwalOption()
    {
        Category = cate,
        Title = "Sweet"
    });
}

Set display content

By setting Title Content is used to display the title and content of the pop-up window

Demo

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<SweetAlerts> Localizer
@inject SwalService SwalService

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Button Icon="fa-solid fa-font-awesome" Text="Title" Color="Color.Success" OnClick="@ShowTitle" />
    </div>
    <div class="col-12 col-sm-6">
        <Button Icon="fa-solid fa-font-awesome" Text="Content" Color="Color.Success" OnClick="@ShowContent" />
    </div>
</div>

@code {
    private Task ShowTitle() => SwalService.Show(new SwalOption()
    {
        Category = SwalCategory.Success,
        Title = "Title"
    });

    private Task ShowContent() => SwalService.Show(new SwalOption()
    {
        Category = SwalCategory.Success,
        Content = "Content"
    });
}

Custom button

Customize the buttons in the pop-up window by setting ButtonTemplate

Demo

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<SweetAlerts> Localizer
@inject SwalService SwalService

<Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Success" OnClick="@ShowButtons" />

@code {
    private async Task ShowButtons()
    {
        var op = new SwalOption
        {
            Category = SwalCategory.Success,
            Title = "Title",
            Content = "Content",
            ShowClose = false,
            ButtonTemplate = new RenderFragment(builder =>
            {
                builder.OpenComponent<DialogCloseButton>(0);
                builder.AddAttribute(1, nameof(Button.Text), "Close");
                builder.CloseComponent();
            })
        };
        await SwalService.Show(op);
    }
}

Show custom components

By setting the Component popup content as a custom component

Demo

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<SweetAlerts> Localizer
@inject SwalService SwalService

<Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Success" OnClick="@ShowComponent" />

@code {
    private async Task ShowComponent()
    {
        var op = new SwalOption()
        {
            BodyTemplate = new RenderFragment(builder =>
            {
                builder.OpenElement(0, "div");
                builder.AddAttribute(1, "class", "text-center");
                builder.OpenComponent<Counter>(2);
                builder.CloseComponent();
                builder.CloseElement();
            })
        };
        await SwalService.Show(op);
    }
}

By calling the await SwalService.ShowModal method, the modal box is popped up. After clicking the button in the pop-up window to close the pop-up window, the subsequent code continues to execute.

Demo

This sample code calls The method await SwalService.ShowModal pops up a modal box, and the subsequent code continues to execute only after the pop-up window is closed.

IsConfirm The parameter indicates that the pop-up window is a confirmation window, and two buttons are automatically generated Cancel Confirm

var ret = await SwalService.ShowModal(op);

// ShowModal
Trace.Log($"{ret}");

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<SweetAlerts> Localizer
@inject SwalService SwalService

<Button class="mt-3" Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Success" OnClick="@ShowModal" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private async Task ShowModal()
    {
        var op = new SwalOption()
        {
            Title = Localizer["SwalOptionTitle"],
            Content = Localizer["SwalOptionContent"]
        };
        var ret = await SwalService.ShowModal(op);

        Trace.Log($"{Localizer["SwalConsoleInfo"]}：{ret}");
    }
}

Customize the Footer template by setting FooterTemplate

Demo

parameter ShowFooter The default is false to not display the footer template, it needs to be set to true

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<SweetAlerts> Localizer
@inject SwalService SwalService

<Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsFooterButtonText"]" Color="Color.Success" OnClick="@ShowFooterComponent" />

@code {
    private async Task ShowFooterComponent()
    {
        var op = new SwalOption()
        {
            Category = SwalCategory.Error,
            Title = "Oops...",
            Content = "Something went wrong!",
            ShowFooter = true,
            FooterTemplate = BootstrapDynamicComponent.CreateComponent<SwalFooter>().Render()
        };
        await SwalService.Show(op);
    }
}

Auto-off function

Customize the auto-close time by setting the IsAutoHide Delay property

Demo

parameter IsAutoHide Defaults to false to disable auto-close, The parameter Delay defaults to 4000 milliseconds

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<SweetAlerts> Localizer
@inject SwalService SwalService

<Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsCloseButtonText"]" Color="Color.Success" OnClick="@ShowAutoCloseSwal" />

@code {
    private async Task ShowAutoCloseSwal()
    {
        var op = new SwalOption()
        {
            Category = SwalCategory.Error,
            Title = "Oops...",
            Content = "Something went wrong!",
            ShowFooter = true,
            IsAutoHide = true,
            Delay = 4000,
            FooterTemplate = BootstrapDynamicComponent.CreateComponent<SwalFooter>().Render()
        };
        await SwalService.Show(op);
    }
}

Attributes

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

SweetAlert popup component

Modal dialog box, mostly used to continue after inquiring during the action, or to display the execution result

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01