Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Alert

Displays important alert messages.

Basic usage

Alert components are non-overlay elements in the page that does not disappear automatically.

Demo

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple dark alert—check it out!

<Alert Color="Color.Primary">@AlertPrimaryText</Alert>
<Alert Color="Color.Secondary">@AlertSecondaryText</Alert>
<Alert Color="Color.Success">@AlertSuccessText</Alert>
<Alert Color="Color.Danger">@AlertDangerText</Alert>
<Alert Color="Color.Warning">@AlertWarningText</Alert>
<Alert Color="Color.Info">@AlertInfoText</Alert>
<Alert Color="Color.Dark">@AlertDarkText</Alert>

@code
{
    [Inject]
    [NotNull]
    private IStringLocalizer<AlertNormal>? Localizer { get; set; }

    [NotNull]
    private string? AlertPrimaryText { get; set; }

    [NotNull]
    private string? AlertSecondaryText { get; set; }

    [NotNull]
    private string? AlertSuccessText { get; set; }

    [NotNull]
    private string? AlertDangerText { get; set; }

    [NotNull]
    private string? AlertWarningText { get; set; }

    [NotNull]
    private string? AlertInfoText { get; set; }

    [NotNull]
    private string? AlertDarkText { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
        AlertSecondaryText ??= Localizer[nameof(AlertSecondaryText)];
        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
        AlertDarkText ??= Localizer[nameof(AlertDarkText)];
    }
}

Close button

Customize the close button as texts or other symbols.

Demo

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple dark alert—check it out!

<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Primary">@AlertPrimaryText</Alert>
<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Secondary">@AlertSecondaryText</Alert>
<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Success">@AlertSuccessText</Alert>
<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Danger">@AlertDangerText</Alert>
<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Warning">@AlertWarningText</Alert>
<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Info">@AlertInfoText</Alert>
<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Dark">@AlertDarkText</Alert>
<BlockLogger @ref="Trace" class="mt-3" />

@code
{
    [Inject]
    [NotNull]
    private IStringLocalizer<AlertClose>? Localizer { get; set; }

    [NotNull]
    private string? AlertPrimaryText { get; set; }

    [NotNull]
    private string? AlertSecondaryText { get; set; }

    [NotNull]
    private string? AlertSuccessText { get; set; }

    [NotNull]
    private string? AlertDangerText { get; set; }

    [NotNull]
    private string? AlertWarningText { get; set; }

    [NotNull]
    private string? AlertInfoText { get; set; }

    [NotNull]
    private string? AlertDarkText { get; set; }

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

    protected override void OnInitialized()
    {
        base.OnInitialized();

        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
        AlertSecondaryText ??= Localizer[nameof(AlertSecondaryText)];
        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
        AlertDarkText ??= Localizer[nameof(AlertDarkText)];
    }

    /// <summary>
    /// 关闭警告框回调方法
    /// </summary>
    /// <returns></returns>
    private Task DismissClick()
    {
        Trace.Log("Alert Dismissed");
        return Task.CompletedTask;
    }
}

With Icon

Displaying an icon improves readability.

Demo

A simple primary alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple danger alert—check it out!

<Alert Icon="fa-solid fa-circle-check" Color="Color.Success">@AlertPrimaryText</Alert>
<Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning">@AlertWarningText</Alert>
<Alert Icon="fa-solid fa-circle-question" Color="Color.Info">@AlertInfoText</Alert>
<Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger">@AlertDangerText</Alert>

@code
{
    [Inject]
    [NotNull]
    private IStringLocalizer<AlertIcon>? Localizer { get; set; }

    [NotNull]
    private string? AlertPrimaryText { get; set; }

    [NotNull]
    private string? AlertWarningText { get; set; }

    [NotNull]
    private string? AlertInfoText { get; set; }

    [NotNull]
    private string? AlertDangerText { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
    }
}

Border

Set ShowBorder="true" show border

Demo

A simple primary alert—check it out!

A simple success alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple danger alert—check it out!

<Alert Icon="fa-solid fa-circle-check" Color="Color.Primary" ShowBorder="true">@AlertPrimaryText</Alert>
<Alert Icon="fa-solid fa-circle-check" Color="Color.Success" ShowBorder="true">@AlertSuccessText</Alert>
<Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning" ShowBorder="true">@AlertWarningText</Alert>
<Alert Icon="fa-solid fa-circle-question" Color="Color.Info" ShowBorder="true">@AlertInfoText</Alert>
<Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger" ShowBorder="true">@AlertDangerText</Alert>

@code
{
    [Inject]
    [NotNull]
    private IStringLocalizer<AlertBorder>? Localizer { get; set; }

    [NotNull]
    private string? AlertPrimaryText { get; set; }

    [NotNull]
    private string? AlertSuccessText { get; set; }

    [NotNull]
    private string? AlertDangerText { get; set; }

    [NotNull]
    private string? AlertWarningText { get; set; }

    [NotNull]
    private string? AlertInfoText { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
    }
}

Shadow

Set ShowShadow="true" Show shadow

Demo

A simple primary alert—check it out!

A simple success alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple danger alert—check it out!

<Alert Icon="fa-solid fa-circle-check" Color="Color.Primary" ShowShadow="true">@AlertPrimaryText</Alert>
<Alert Icon="fa-solid fa-circle-check" Color="Color.Success" ShowShadow="true">@AlertSuccessText</Alert>
<Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning" ShowShadow="true">@AlertWarningText</Alert>
<Alert Icon="fa-solid fa-circle-question" Color="Color.Info" ShowShadow="true">@AlertInfoText</Alert>
<Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger" ShowShadow="true">@AlertDangerText</Alert>

@code
{
    [Inject]
    [NotNull]
    private IStringLocalizer<AlertShadow>? Localizer { get; set; }

    [NotNull]
    private string? AlertPrimaryText { get; set; }

    [NotNull]
    private string? AlertSuccessText { get; set; }

    [NotNull]
    private string? AlertDangerText { get; set; }

    [NotNull]
    private string? AlertWarningText { get; set; }

    [NotNull]
    private string? AlertInfoText { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
    }
}

With Bar

Show Tip

Demo

A simple info alert—check it out!

A simple success alert—check it out!

A simple primary alert—check it out!

A simple warning alert—check it out!

A simple danger alert—check it out!

<Alert ShowBar="true" ShowBorder="true" Color="Color.Info">
    <div>@AlertInfoText</div>
</Alert>
<Alert ShowBar="true" ShowBorder="true" Color="Color.Success">
    <div>@AlertSuccessText</div>
</Alert>
<Alert ShowBar="true" ShowBorder="true" Color="Color.Primary">
    <div>@AlertPrimaryText</div>
</Alert>
<Alert ShowBar="true" ShowBorder="true" Color="Color.Warning">
    <div>@AlertWarningText</div>
</Alert>
<Alert ShowBar="true" ShowBorder="true" Color="Color.Danger">
    <div>@AlertDangerText</div>
</Alert>

@code
{
    [Inject]
    [NotNull]
    private IStringLocalizer<AlertShowBar>? Localizer { get; set; }

    [NotNull]
    private string? AlertPrimaryText { get; set; }

    [NotNull]
    private string? AlertSuccessText { get; set; }

    [NotNull]
    private string? AlertDangerText { get; set; }

    [NotNull]
    private string? AlertWarningText { get; set; }

    [NotNull]
    private string? AlertInfoText { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
    }
}

Attributes

Event

B station related video link

交流群

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

Alert

Displays important alert messages.

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01