Color

This prop is used to set the color of the component.

Structure

This prop has 3 required properties:

• type - The namespace of the prop. \LivewirePageBuilder\Props\Color::class
• label - The label of the prop. Color
• default - The default value of the prop. transparent

This prop has 1 optional property:

• rules - The validation rules of the prop. ['required', 'string', 'regex:/^#[0-9A-Fa-f]{6}$/']

This prop will render a color input field in the editor.

Return value

The return value of the prop will be the value of the color input field in hex format.

Example

public static function getConfig(): array
{
    return [
        'name' => __('Custom Component'),
        'description' => __('A custom component that can be used to display custom content.'),
        'icon' => '/path/to/icon.svg',
        'allow_children' => false,
        'props' => [
            'color' => [
                'type' => \LivewirePageBuilder\Props\Color::class,
                'label' => __('Color'),
                'default' => '#000000',
                'rules' => ['required', 'string', 'regex:/^#[0-9A-Fa-f]{6}$/'],
            ],
        ]
    ];
}