Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Alert

Displays important alert messages.

Basic usage

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

Demo

Close button

Customize the close button as texts or other symbols.

Demo

With Icon

Displaying an icon improves readability.

Demo

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()" />
根据相关法律政策,该内容无法显示

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload