Components / Color picker

Color picker

# Introduction
# Usage
# Handle Color Change
# Livewire model
# Customizing
# Initial Color
# Standalone
# Trigger

# Introduction

The Color Picker component uses @simonwep/pickr package to create a color picker input that can be used to select a color.

We have created a wrapper around the package to make it easier to use in your Livewire components.

# Usage

Simply use <zinq:color-picker /> and you are ready to go!

<zinq:color-picker />

# Handle Color Change

Use your own JavaScript to handle the color change event.

<zinq:color-picker trigger="save">
    const selectedColor = color.toHEXA().toString();
    alert(selectedColor);
</zinq:color-picker>

# Livewire model

You can use the wireModel attribute to bind the value of the color picker to a Livewire property.

When the color is changed, the value of the property will be updated with the new color.

Hi from Livewire component 👋

Selected color:

class ColorPickerExample extends Component
{
    public string $color = '#dedede';

    public function render(): string
    {
        return <<<HTML
            <div class="space-y-4">
                <p>Hi from Livewire component 👋</p>
                <div class="flex space-x-2">
                    <span>Selected color:</span>
                    <zinq:avatar-string style="background-color:{$this->color}" />
                </div>
                <zinq:color-picker initialColor="#dedede" standalone wireModel="color" />
            </div>
        HTML;
    }
}

# Customizing

You can customize the color picker by passing props to the component.

# Initial Color

Use initialColor prop to set the initial color of the color picker.

<zinq:color-picker initialColor="#dedede" />

# Standalone

Use standalone prop to make the color picker standalone.

<zinq:color-picker standalone />

# Trigger

By default, the color picker is triggered when user changes the color. You can use trigger prop to change the trigger event from change to save .

The save trigger will only update the color when user clicks on the save button.

<zinq:color-picker trigger="save" />