Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

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

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload