Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Rate

Scoring components

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

Disable components by setting IsDisable property values

Demo
Enable

Attributes

Loading...

Event

Loading...
@page "/rates"
@inject IStringLocalizer<Rates> Localizer

<h3>Rate</h3>

<h4>Scoring components</h4>

<DemoBlock Title="Basic usage" Introduction="<code>Rate</code> component represents the numeric level with 1 - 5 stars, and the value can be bound in both directions in the background by <code>bind-Value</code> Through the <code>Rate</code> component changes its value, the mouse swipe changes the value, and confirms its value when you click on the star" Name="Normal">
    <Rate Value="@BindValue" ValueChanged="@OnValueChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Disable" Introduction="Disable components by setting <code>IsDisable</code> property values" Name="Disable">
    <div class="row g-3">
        <div class="col-6">
            <Rate Value="@BindValue1" IsDisable="IsDisable" />
        </div>
        <div class="col-6">
            <Switch @bind-Value="IsDisable" OnText="Disable" OnColor="Color.Danger" OffText="Enable" OffColor="@Color.Success" />
        </div>
    </div>
</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 System.Collections.Generic;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Rates
{
    private int BindValue { get; set; } = 3;

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

    private bool IsDisable { get; set; }

    /// <summary>
    /// 
    /// </summary>
    private BlockLogger? Trace { get; set; }

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

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
            new EventItem()
            {
                Name = "ValueChanged",
                Description =Localizer["Event1"],
                Type ="EventCallback<int>"
            }
    };

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Value",
                Description = Localizer["Att1"],
                Type = "int",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "IsDisabled",
                Description = Localizer["Att2"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            }
    };
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload