Color Pickers Components

Pair a brand color with the surface it sits on. The ratio uses relative luminance, and AA for normal text is 4.5:1.

Overview

This component allows users to select multiple colors from a list of predefined options. It generates a responsive GUI where users can select their preferred colors and see their selections updated in real-time. It also provides a function to clear all selected colors at once.

Installation

Follow these steps to implement the component in your Laravel application:

• Copy the PHP component file to your app/Livewire directory. Rename the file if necessary to follow the default Laravel/Livewire directory structure.
• Copy the Blade view file to your resources/views/livewire directory.

Integration

To integrate this component into your existing Laravel project, you can call the component in your blade files using the Livewire syntax. For example:

@livewire('multiple-color-choser')

Usage

To use the component, no additional code is required. The component handles all actions internally. The user can select colors by clicking on the color boxes, and their selections will appear at the bottom of the component. To clear all selections, users can click the "clear" link.

Configuration

The color options are defined in the $colorOptions array in the Livewire component. You can customize the available colors by modifying this array. For example:

$colorOptions = ['black', 'grey', 'maroon', 'navy'];

Remember, the color names must be valid CSS color names or hexadecimal color codes.