Border

This prop is used to set the border properties of the component.

Structure

This prop has 3 required properties:

• type - The namespace of the prop. \LivewirePageBuilder\Props\Border::class
• label - The label of the prop. Border
• default - The default value of the prop. ['style' => 'solid', 'width' => 0, 'color' => 'transparent', 'radius_top_left' => 0, 'radius_top_right' => 0, 'radius_bottom_left' => 0, 'radius_bottom_right' => 0, 'unit' => 'px']

This prop has 1 optional property:

• rules - The validation rules of the prop. ['nullable', 'array']

This prop will render a border control in the editor that allows setting border style, width, color, and border radius for all corners of the component.

Return value

The return value of the prop will be an array with the following structure:

[
    'style' => 'solid',           // Border style (solid, dashed, dotted, etc.)
    'width' => 0,                 // Border width
    'color' => 'transparent',     // Border color (hex code)
    'radius_top_left' => 0,       // Top-left border radius
    'radius_top_right' => 0,      // Top-right border radius
    'radius_bottom_left' => 0,    // Bottom-left border radius
    'radius_bottom_right' => 0,   // Bottom-right border radius
    'unit' => 'px'               // Unit of measurement (px, rem, em, %)
]

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' => [
            'border' => [
                'type' => \LivewirePageBuilder\Props\Border::class,
                'label' => __('Border'),
                'default' => [
                    'style' => 'solid',
                    'width' => 0,
                    'color' => 'transparent',
                    'radius_top_left' => 0,
                    'radius_top_right' => 0,
                    'radius_bottom_left' => 0,
                    'radius_bottom_right' => 0,
                    'unit' => 'px'
                ],
                'rules' => ['nullable', 'array'],
            ],
        ]
    ];
}