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!
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!
With Bar
Show Tip
Demo
Attributes
Loading...
事件 Events
Loading...
@page "/alerts"
<h3>@Title</h3>
<h4>@SubTitle</h4>
<Block Title="@BaseUsageText" Introduction="@IntroText1">
<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>
</Block>
<Block Title="@CloseButtonUsageText" Introduction="@IntroText2">
<div>
<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>
</div>
<Logger @ref="Trace" class="mt-3" />
</Block>
<Block Title="@WithIconUsageText" Introduction="@IntroText3">
<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>
</Block>
<Block Title="@ShowBarUsageText" Introduction="@IntroText4">
<Alert ShowBar="true" Color="Color.Info">
<div>@AlertInfoText</div>
</Alert>
<Alert ShowBar="true" Color="Color.Success">
<div>@AlertSuccessText</div>
</Alert>
<Alert ShowBar="true" Color="Color.Primary">
<div>@AlertPrimaryText</div>
</Alert>
<Alert ShowBar="true" Color="Color.Warning">
<div>@AlertWarningText</div>
</Alert>
<Alert ShowBar="true" Color="Color.Danger">
<div>@AlertDangerText</div>
</Alert>
</Block>
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
根据相关法律政策,该内容无法显示