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

<ColorPicker Value="@Value" />

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

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

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

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

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

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