Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Rate

Scoring components

Basic usage

Rate component represents the numeric level with 1 - 5 stars, and the value can be bound in both directions in the background by bind-Value Through the Rate component changes its value, the mouse swipe changes the value, and confirms its value when you click on the star

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Rates> Localizer

<Rate Value="@BindValue" ValueChanged="@OnValueChanged" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    private BlockLogger? Trace { get; set; }

    private int BindValue { get; set; } = 3;

    private void OnValueChanged(int val)
    {
        BindValue = val;
        Trace?.Log($"{Localizer["RatesLog"]} {val}");
    }
}

Item Template

Set ItemTemplate and custom-rate custom the UI

Demo

.custom-rate {
    --bb-rate-font-size: 1.7rem;
    --bb-rate-height: 30px;
    --bb-rate-width: 30px;
    --bb-rate-active-color: var(--bs-primary);
}

Cry

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Rates> Localizer

<div class="row">
    <div class="col-12 col-sm-6">
        <Rate @bind-Value="IconListValue" class="custom-rate">
            <ItemTemplate>
                <i class="@GetIconList(context)"></i>
            </ItemTemplate>
        </Rate>
    </div>
    <div class="col-12 col-sm-6">
        <div class="d-flex align-items-center h-100">
            @GetIconValueChanged()
        </div>
    </div>
</div>

@code {
    private int IconListValue { get; set; } = 1;

    private List<string> IconList { get; } = new List<string>()
    {
        "fa-solid fa-face-sad-cry",
        "fa-solid fa-face-sad-tear",
        "fa-solid fa-face-smile",
        "fa-solid fa-face-surprise",
        "fa-solid fa-face-grin-stars"
    };

    private string GetIconList(int index) => IconList[index - 1];

    private string GetIconValueChanged() => (IconListValue - 1) switch
    {
        0 => Localizer["RatesCry"],
        1 => Localizer["RatesTear"],
        2 => Localizer["RatesSmile"],
        3 => Localizer["RatesSurprise"],
        _ => Localizer["RatesGrin"]
    };
}

Disable

Disable components by setting IsDisable property values

Demo

Enable

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Rates> Localizer

<div class="row g-3">
    <div class="col-6">
        <Rate Value="@BindValue1" IsDisable="IsDisable" />
    </div>
    <div class="col-6">
        <Switch @bind-Value="IsDisable" OnText="@Localizer["RatesSwitchOn"]" OnColor="Color.Danger" OffText="@Localizer["RatesSwitchOff"]" OffColor="@Color.Success" />
    </div>
</div>

@code {
    private int BindValue1 { get; set; } = 2;

    private bool IsDisable { get; set; }
}

Attributes

Event

B station related video link

交流群

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

Rate

Scoring components

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01