p11 UI
true-perfect-code
Version: 1.1.69

P11ColorPicker Component

The P11ColorPicker is a native HTML-based color input component. It wraps the standard <input type="color"> element, providing a straightforward and accessible way for users to select colors, with optional display of the hexadecimal value.
Note: This component leverages the browser's native color picker UI, which may vary in appearance across different browsers and operating systems.

Basic Color Picker

A simple color picker with default settings.

#007bff
Select a color for the background.

Current Color: #007bff

Implementation

<h2 class="mb-3">Basic Color Picker</h2>
<p>A simple color picker with default settings.</p>
<P11ColorPicker Label="Background Color"
                Description="Select a color for the background."
                @bind-Value="backgroundColor" />
<p>Current Color: @backgroundColor</p>
<div style="width: 50px; height: 50px; background-color: @backgroundColor; border: 1px solid #ccc;"></div>
@code {
    // Properties for P11ColorPicker examples
    private string backgroundColor = "#007bff"; // Default blue
}

Color Picker with Initial Value and No Hex Display

Color picker with a predefined value (`#FF00FF`) and without additional hex display.

Current Color: #FF00FF

Implementation

<h2 class="mb-3">Color Picker with Initial Value and No Hex Display</h2>
<p>Color picker with a predefined value (`#FF00FF`) and without additional hex display.</p>
<P11ColorPicker Label="Accent Color"
                @bind-Value="accentColor"
                ShowHexValue="false" />
<p>Current Color: @accentColor</p>
<div style="width: 50px; height: 50px; background-color: @accentColor; border: 1px solid #ccc;"></div>
@code {
    // Properties for P11ColorPicker examples
    private string accentColor = "#FF00FF"; // Magenta
}

Disabled Color Picker

A disabled color picker.

#cccccc

Current Color: #cccccc

Implementation

<h2 class="mb-3">Disabled Color Picker</h2>
<p>A disabled color picker.</p>
<P11ColorPicker Label="Disabled Color"
                @bind-Value="disabledColor"
                Disabled="true" />
<p>Current Color: @disabledColor</p>
<div style="width: 50px; height: 50px; background-color: @disabledColor; border: 1px solid #ccc;"></div>
@code {
    // Properties for P11ColorPicker examples
    private string disabledColor = "#cccccc"; // Grey
}

Color Picker with Custom CSS and Additional Attributes

Color picker with custom attributes and CSS class. Check this in the browser inspector.

#33cc33

Current Color: #33cc33

Implementation

<h2 class="mb-3">Color Picker with Custom CSS and Additional Attributes</h2>
<p>Color picker with custom attributes and CSS class. Check this in the browser inspector.</p>
<P11ColorPicker Label="With Extra Attributes"
                @bind-Value="extraColor"
                @attributes='new Dictionary<string, object> { { "data-custom", "color-data" }, { "tabindex", "5" } }'
                CssClass="my-custom-color-picker-container" />
<p>Current Color: @extraColor</p>
<div style="width: 50px; height: 50px; background-color: @extraColor; border: 1px solid #ccc;"></div>

<style>
    /* Custom styles to demonstrate the P11ColorPicker CssClass parameter */
    .my-custom-color-picker-container {
        padding: 20px;
        background-color: #f8f9fa; /* Light grey background */
        border: 2px solid #0d6efd; /* Blue border */
        border-radius: 8px; /* Rounded corners */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

        /* Optional: additional styling for the label and description inside the container */
        .my-custom-color-picker-container .form-label {
            font-weight: bold;
            color: #495057;
            text-transform: uppercase;
        }

        .my-custom-color-picker-container .form-text {
            font-style: italic;
            font-size: 0.9em;
        }
</style>
@code {
    // Properties for P11ColorPicker examples
    private string extraColor = "#33cc33"; // Green
}

Color Picker with ValueChanged Event

Demonstrates how to use the ValueChanged event to react to changes in the selected color.

#000000
The color below will update when you select a new color.

Selected Color (via Event): #000000

Implementation

<h2 class="mb-3">Color Picker with ValueChanged Event</h2>
<p>Demonstrates how to use the <code>ValueChanged</code> event to react to changes in the selected color.</p>
<P11ColorPicker Value="@valueChangedColor"
                ValueChanged="@((string? newColor) => OnColorChanged(newColor))"
                Label="Monitor Color Changes"
                Description="The color below will update when you select a new color." />
<p>Selected Color (via Event): <span class="fw-bold">@valueChangedColor</span></p>
<div style="width: 50px; height: 50px; background-color: @valueChangedColor; border: 1px solid #ccc;"></div>
@code {
    // For ValueChanged event example
    private string valueChangedColor = "#000000"; // Default black

    /// <summary>
    /// Event handler for the ValueChanged event of the P11ColorPicker.
    /// Updates the bound value and logs the change to the console.
    /// </summary>
    /// <param name="newColor">The new hexadecimal color string.</param>
    private void OnColorChanged(string? newColor)
    {
        valueChangedColor = newColor ?? "#000000"; // Ensure a default if null is passed
        Console.WriteLine($"Color changed to: {valueChangedColor}");
    }
}

Component API

Parameter Type Default Description
Label string? null Gets or sets the label text displayed next to the input field.
Description string? null Gets or sets a descriptive text displayed below the input field.
Disabled bool false Gets or sets a value indicating whether the input field is disabled.
CssClass string? null Gets or sets custom CSS classes to be applied to the component's container div.
ShowHexValue bool true Gets or sets whether to display the hexadecimal value of the selected color next to the picker.
ShowDevelopmentErrors bool true Gets or sets a value indicating whether development-time configuration errors should be displayed. Set to false for production environments.
Value string? #000000 Gets or sets the current selected color as a hexadecimal string (e.g., "#RRGGBB"). Uses two-way binding. Default value is "#000000" if the initial value is null or empty.
AdditionalAttributes Dictionary<string, object>? null Captures all unmatched attributes that are not explicitly defined as component parameters. These attributes are applied to the component's container div.
Events
ValueChanged EventCallback<string?> - Event callback for when the Value changes. Used for two-way binding.
An unhandled error has occurred. Reload 🗙