Enterprise-level component library based on Bootstrap and BlazorAlert
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!
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!
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!
Border
Set ShowBorder="true" show border
Demo
A simple primary alert—check it out!
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!
Shadow
Set ShowShadow="true" Show shadow
Demo
A simple primary alert—check it out!
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!
With Bar
Show Tip
Demo
Attributes
Loading...
Event
Loading...
@page "/alerts"
<h3>@Title</h3>
<h4>@SubTitle</h4>
<DemoBlock Title="@BaseUsageText" Introduction="@IntroText1" Name="Normal">
<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>
</DemoBlock>
<DemoBlock Title="@CloseButtonUsageText" Introduction="@IntroText2" Name="Close">
<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" />
</DemoBlock>
<DemoBlock Title="@WithIconUsageText" Introduction="@IntroText3" Name="Icon">
<Alert Icon="fa fa-check-circle" Color="Color.Success">@AlertPrimaryText</Alert>
<Alert Icon="fa fa-warning" Color="Color.Warning">@AlertWarningText</Alert>
<Alert Icon="fa fa-question-circle" Color="Color.Info">@AlertInfoText</Alert>
<Alert Icon="fa fa-times-circle" Color="Color.Danger">@AlertDangerText</Alert>
</DemoBlock>
<DemoBlock Title="Border" Introduction="Set <code>ShowBorder="true"</code> show border" Name="Shadow">
<Alert Icon="fa fa-check-circle" Color="Color.Primary" ShowBorder="true">@AlertPrimaryText</Alert>
<Alert Icon="fa fa-check-circle" Color="Color.Success" ShowBorder="true">@AlertPrimaryText</Alert>
<Alert Icon="fa fa-warning" Color="Color.Warning" ShowBorder="true">@AlertWarningText</Alert>
<Alert Icon="fa fa-question-circle" Color="Color.Info" ShowBorder="true">@AlertInfoText</Alert>
<Alert Icon="fa fa-times-circle" Color="Color.Danger" ShowBorder="true">@AlertDangerText</Alert>
</DemoBlock>
<DemoBlock Title="Shadow" Introduction="Set <code>ShowShadow="true"</code> Show shadow" Name="Shadow">
<Alert Icon="fa fa-check-circle" Color="Color.Primary" ShowBorder="true" ShowShadow="true">@AlertPrimaryText</Alert>
<Alert Icon="fa fa-check-circle" Color="Color.Success" ShowBorder="true" ShowShadow="true">@AlertPrimaryText</Alert>
<Alert Icon="fa fa-warning" Color="Color.Warning" ShowBorder="true" ShowShadow="true">@AlertWarningText</Alert>
<Alert Icon="fa fa-question-circle" Color="Color.Info" ShowBorder="true" ShowShadow="true">@AlertInfoText</Alert>
<Alert Icon="fa fa-times-circle" Color="Color.Danger" ShowBorder="true" ShowShadow="true">@AlertDangerText</Alert>
</DemoBlock>
<DemoBlock Title="@ShowBarUsageText" Introduction="@IntroText4" Name="ShowBar">
<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>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Alerts
{
[NotNull]
private string? Title { get; set; }
[NotNull]
private string? SubTitle { get; set; }
[NotNull]
private string? BaseUsageText { get; set; }
[NotNull]
private string? IntroText1 { 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 string? CloseButtonUsageText { get; set; }
[NotNull]
private string? IntroText2 { get; set; }
[NotNull]
private string? WithIconUsageText { get; set; }
[NotNull]
private string? IntroText3 { get; set; }
[NotNull]
private string? ShowBarUsageText { get; set; }
[NotNull]
private string? IntroText4 { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Alerts>? Localizer { get; set; }
[NotNull]
private BlockLogger? Trace { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Title ??= Localizer[nameof(Title)];
SubTitle ??= Localizer[nameof(SubTitle)];
BaseUsageText ??= Localizer[nameof(BaseUsageText)];
IntroText1 ??= Localizer[nameof(IntroText1)];
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)];
CloseButtonUsageText ??= Localizer[nameof(CloseButtonUsageText)];
IntroText2 ??= Localizer[nameof(IntroText2)];
WithIconUsageText ??= Localizer[nameof(WithIconUsageText)];
IntroText3 ??= Localizer[nameof(IntroText3)];
ShowBarUsageText ??= Localizer[nameof(ShowBarUsageText)];
IntroText4 ??= Localizer[nameof(IntroText4)];
}
/// <summary>
///
/// </summary>
private Task DismissClick()
{
Trace.Log("Alert Dismissed");
return Task.CompletedTask;
}
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private static IEnumerable<EventItem> GetEvents() => new EventItem[]
{
new EventItem()
{
Name = "OnDismiss",
Description="关闭警告框回调方法",
Type ="EventCallback<MouseEventArgs>"
}
};
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "ChildContent",
Description = "内容",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Class",
Description = "样式",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Color",
Description = "颜色",
Type = "Color",
ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
DefaultValue = "Primary"
},
new AttributeItem() {
Name = "Icon",
Description = "图标",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ShowDismiss",
Description = "关闭按钮",
Type = "bool",
ValueList = " — ",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowBar",
Description = "是否显示左侧 Bar",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowBorder",
Description = "是否显示边框",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowShadow",
Description = "是否显示阴影",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
}
};
}
