Padding

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

Structure

This prop has 3 required properties:

• type - The namespace of the prop. \LivewirePageBuilder\Props\Padding::class
• label - The label of the prop. Padding
• default - The default value of the prop. ['left' => 0, 'right' => 0, 'top' => 0, 'bottom' => 0, 'unit' => 'px']

This prop has 1 optional property:

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

This prop will render a padding control in the editor that allows setting padding for all sides of the component.

Return value

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

[
    'left' => 0,    // Left padding value
    'right' => 0,   // Right padding value
    'top' => 0,     // Top padding value
    'bottom' => 0,  // Bottom padding value
    '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' => [
            'padding' => [
                'type' => \LivewirePageBuilder\Props\Padding::class,
                'label' => __('Padding'),
                'default' => [
                    'left' => 0,
                    'right' => 0,
                    'top' => 0,
                    'bottom' => 0,
                    'unit' => 'px'
                ],
                'rules' => ['nullable', 'array'],
            ],
        ]
    ];
}