Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

ColorPicker

Select color to use

Basic Usage

Set the color value by setting the Value property

Demo

<ColorPicker Value="@Value" OnValueChanged="@OnColorChanged" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private string? Value { get; set; }

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

Set Initial Value

Set the color value by setting the Value property

Demo

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

<ColorPicker Value="@Value" />

@code {
    private string Value { get; set; } = "#FFFFFF";
}

Two-way binding

Set the color value by setting the Value property

Demo

Value3: #DDDDDD

<ColorPicker @bind-Value="@Value" />
<div class="mt-3">Value3: @Value</div>

@code {
    private string Value { get; set; } = "#DDDDDD";
}

Disabled

Disable this component by setting the IsDisabled property

Demo

<ColorPicker Value="@Value" IsDisabled="true" />

@code {
    private string? Value { get; set; }
}

Used in the verification form

Built in ValidateForm to use

Demo

<ValidateForm Model="Dummy">
    <div class="row g-3 form-inline">
        <div class="col-6">
            <ColorPicker @bind-Value="@Dummy.Name" />
        </div>
    </div>
</ValidateForm>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private Foo? Dummy { get; set; } = new Foo() { Name = "#dddddd" };
}

Attributes

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

<h3>ColorPicker</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" Demo="typeof(Demos.ColorPicker.ColorPickerNormal)" />

<DemoBlock Title="Set Initial Value" Introduction="Set the color value by setting the <code>Value</code> property" Name="Value" Demo="typeof(Demos.ColorPicker.ColorPickerValue)">
    <p>Set <code>Value='@Value'</code> to initialize the default value</p>
</DemoBlock>

<DemoBlock Title="Two-way binding" Introduction="Set the color value by setting the <code>Value</code> property" Name="BindValue" Demo="typeof(Demos.ColorPicker.ColorPickerBindValue)" />

<DemoBlock Title="Disabled" Introduction="Disable this component by setting the <code>IsDisabled</code> property" Name="Disabled" Demo="typeof(Demos.ColorPicker.ColorPickerDisabled)" />

<DemoBlock Title="Used in the verification form" Introduction="Built in <code>ValidateForm</code> to use" Name="ValidateForm" Demo="typeof(Demos.ColorPicker.ColorPickerValidateForm)" />

<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/

namespace BootstrapBlazor.Shared.Samples;

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

ColorPicker

Select color to use

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.2.5-beta02