Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Tag

Used for marking and selection.

Basic usage

Non floating elements in the page will not disappear automatically.

Demo

Label I

Label II

Label III

Label IV

Label V

Label VI

Label VII

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

<div class="row g-3">
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Primary">@Localizer["Tag1"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Secondary">@Localizer["Tag2"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Success">@Localizer["Tag3"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Danger">@Localizer["Tag4"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Warning">@Localizer["Tag5"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Info">@Localizer["Tag6"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Dark">@Localizer["Tag7"]</Tag>
    </div>
</div>

Close button

Provides a label for the close button

Demo

Label I

Label II

Label III

Label IV

Label V

Label VI

Label VII

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

<div class="row g-3">
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag1"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Secondary" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag2"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Success" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag3"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Danger" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag4"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Warning" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag5"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Info" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag6"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Color="Color.Dark" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag7"]</Tag>
    </div>
</div>
<BlockLogger @ref="Trace" class="mt-3" />

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

    private Task DismissClick()
    {
        Trace.Log($"Tag Dismissed");
        return Task.CompletedTask;
    }
}

With Icon

Improve readability when representing a state.

Demo

Label I

Label II

Label III

Label IV

Label V

Label VI

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

<div class="row g-3">
    <div class="col-4 col-sm-auto">
        <Tag Icon="fa-fw fa-solid fa-circle-check" Color="Color.Success">@Localizer["Tag1"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Icon="fa-fw fa-solid fa-triangle-exclamation" Color="Color.Warning">@Localizer["Tag2"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Icon="fa-fw fa-solid fa-circle-question" Color="Color.Info">@Localizer["Tag3"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Icon="fa-fw fa-solid fa-circle-xmark" Color="Color.Danger">@Localizer["Tag4"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Icon="fa-fw fa-solid fa-angle-left" Color="Color.Primary">@Localizer["Tag5"]</Tag>
    </div>
    <div class="col-4 col-sm-auto">
        <Tag Icon="fa-fw fa-solid fa-user" Color="Color.Dark">@Localizer["Tag6"]</Tag>
    </div>
</div>

Attributes

Event

B station related video link

交流群

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

Tag

Used for marking and selection.

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01