Tesserae - Color Picker

ColorPicker

Description

The ColorPicker component provides a native browser widget for selecting colors. It is part of the Tesserae UI library's Components group and is ideal when you need to allow users to choose colors in your application. By default, it displays black unless a different preset color is specified. The component supports programmatically setting its value and validating user input.

Usage

Instantiate the ColorPicker using the Tesserae.UI static helper method. You can either create a basic ColorPicker or specify a preset color by providing a Color argument. The component exposes a Color property for getting or setting the current color, and a SetColor method to update the color, which in turn updates the displayed hex value.

color-picker-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var colorPicker = ColorPicker().W(48).H(48);
            
            colorPicker.OnChange((sender, args) =>
            {
                Toast().Information($"Selected color: {colorPicker.Text}");
            });
            document.body.style.overflow = "hidden";
            MountCenteredToBody(colorPicker);
        }
    }

}

API reference

class

ColorPicker

public class ColorPicker : Input<ColorPicker>

A form input for picking a color, backed by the browser's native color input.

Constructors

Constructor

ColorPicker

public ColorPicker(Color color) : base("color", color?.ToHex() ?? "#000000")

Initializes a new instance of this class.

Properties

Property

ColorPicker.Color

public Color Color { get ; set ; }

Gets or sets the color of the component.

Methods

Method

ColorPicker.SetColor

public ColorPicker SetColor(Color color)

Sets the color of the component.

Samples

Basic Usage of ColorPicker

The following sample demonstrates how to instantiate the ColorPicker component, attach an event handler to update another component's background based on the selected color, and display the currently selected value when a button is clicked.

color-picker-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new ColorPickerDemo();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ColorPickerDemo : IComponent
    {
        public HTMLElement Render()
        {
            // Create a ColorPicker
            var colorPicker = ColorPicker();

            // Create a Button to react to color changes
            Button button = null;
            button = Button().SetText("Click me!");

            // Update the button background whenever the color changes
            colorPicker.OnChange((sender, args) =>
            {
                button.Background = colorPicker.Text;
            });

            // On button click, display an alert with the current color information
            button.OnClick((sender, args) =>
            {
                window.alert($"{colorPicker.Text}, {colorPicker.Color.ToHex()}");
            });

            // Assemble the UI components in a vertical stack
            return Stack().Children(
                Label("Select a color:"),
                colorPicker,
                button
            ).Render();
        }
    }
}

ColorPicker

Description

Usage

API reference

Constructors

ColorPicker

Properties

ColorPicker.Color

Methods

ColorPicker.SetColor

Samples

Basic Usage of ColorPicker

See also