
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
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;
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 = ""
}
};
}