
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
Attributes
Event
@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;
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"
}
};
}