Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Rate 评分

评分组件

Rate 组件通过 1 - 5 颗星表示数值等级,后台可以通过 bind-Value 对数值进行双向绑定通过 Rate 组件更改其值,鼠标滑动更改值,点击星星时确认其值

Demo

通过设置 IsDisable 属性值禁用组件

Demo
启用

Attributes

Loading...

Event

Loading...
@page "/rates"

<h3>Rate 评分</h3>

<h4>评分组件</h4>

<Block Title="基本用法" Introduction="<code>Rate</code> 组件通过 1 - 5 颗星表示数值等级,后台可以通过 <code>bind-Value</code> 对数值进行双向绑定通过 <code>Rate</code> 组件更改其值,鼠标滑动更改值,点击星星时确认其值">
    <Rate Value="@BindValue" ValueChanged="@OnValueChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用" Introduction="通过设置 <code>IsDisable</code> 属性值禁用组件">
    <div class="row g-3">
        <div class="col-6">
            <Rate Value="@BindValue1" IsDisable="IsDisable" />
        </div>
        <div class="col-6">
            <Switch @bind-Value="IsDisable" OnText="禁用" OnColor="Color.Danger" OffText="启用" OffColor="@Color.Success" />
        </div>
    </div>
</Block>

<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.Pages.Components;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <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($"评星: {val}");
        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "ValueChanged",
                Description="值改变时回调委托",
                Type ="EventCallback<int>"
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Value",
                Description = "组件值",
                Type = "int",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "IsDisabled",
                Description = "是否禁用 默认为 fasle",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

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