Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

ColorPicker Color Picker

Select color to use

Set the color value by setting the Value property

Demo

Set the color value by setting the Value property

Demo

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

Set the color value by setting the Value property

Demo
Value3: #DDDDDD

Disable this component by setting the IsDisabled property

Demo

Built in ValidateForm to use

Demo

Attributes

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

<h3>ColorPicker Color Picker</h3>

<h4>Select color to use</h4>

<DemoBlock Title="Basic Usage" Introduction="Set the color value by setting the <code>Value</code> property" Name="Normal">
    <ColorPicker Value="@Value1" OnValueChanged="@OnColorChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Set Initial Value" Introduction="Set the color value by setting the <code>Value</code> property" Name="Value">
    <p>Set <code>Value='@Value2'</code> to initialize the default value</p>
    <ColorPicker Value="@Value2" />
</DemoBlock>

<DemoBlock Title="Two-way binding" Introduction="Set the color value by setting the <code>Value</code> property" Name="BindValue">
    <ColorPicker @bind-Value="@Value3" />
    <div class="mt-3">Value3: @Value3</div>
</DemoBlock>

<DemoBlock Title="Disabled" Introduction="Disable this component by setting the <code>IsDisabled</code> property" Name="Disabled">
    <ColorPicker Value="@Value5" IsDisabled="true" />
</DemoBlock>

<DemoBlock Title="Used in the verification form" Introduction="Built in <code>ValidateForm</code> to use" Name="ValidateForm">
    <ValidateForm Model="Dummy">
        <div class="row g-3 form-inline">
            <div class="col-6">
                <ColorPicker @bind-Value="@Dummy.Name" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<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.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

/// <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? 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;
    }

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

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