Bootstrap Blazor - 企业级 UI 组件库

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

ColorPicker Color Picker

Select color to use

Basic Usage

Set the color value by setting the Value property

Demo

Set Initial Value

Set the color value by setting the Value property

Demo

Set Value='@Value2' to initialize the default value

Two-way binding

Set the color value by setting the Value property

Demo

Value3: #DDDDDD

Disabled

Disable this component by setting the IsDisabled property

Demo

Used in the verification form

Built in ValidateForm to use

Demo

Attributes

@page "/colorpickers"
@inject IStringLocalizer<ColorPickers> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
    <ColorPicker Value="@Value1" OnValueChanged="@OnColorChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
    <p>@((MarkupString)Localizer["P1"].Value)</p>
    <ColorPicker Value="@Value2" />
</Block>

<Block Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]">
    <ColorPicker @bind-Value="@Value3" />
    <div class="mt-3">Value3: @Value3</div>
</Block>

<Block Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]">
    <ColorPicker Value="@Value5" IsDisabled="true" />
</Block>

<Block Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]">
    <ValidateForm Model="Dummy">
        <div class="row g-3 form-inline">
            <div class="col-6">
                <ColorPicker @bind-Value="@Dummy.Name" />
            </div>
        </div>
    </ValidateForm>
</Block>

<AttributeTable Items="@GetAttributes()" />

// 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 Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class ColorPickers
    {
        [NotNull]
        private BlockLogger? Trace { get; set; }

        private string? Value1 { get; set; }

        private string Value2 { get; set; } = "#FFFFFF";

        private string Value3 { get; set; } = "#DDDDDD";

        private string? Value4 { get; set; }

        private string? Value5 { get; set; }

        [NotNull]
        private Foo? Dummy { get; set; } = new Foo() { Name = "#dddddd" };

        private Task OnColorChanged(string color)
        {
            Trace.Log($"Selected color: {color}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private  IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            new AttributeItem()
            {
                Name = "OnValueChanged",
                Description = Localizer["Event1"]!,
                Type = "Func<string, Task>",
                ValueList = "",
                DefaultValue = ""
            }
        };
    }
}