Margin

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

Structure

This prop has 3 required properties:

• type - The namespace of the prop. \LivewirePageBuilder\Props\Margin::class
• label - The label of the prop. Margin
• 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 margin control in the editor that allows setting margin 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 margin value
    'right' => 0,   // Right margin value
    'top' => 0,     // Top margin value
    'bottom' => 0,  // Bottom margin 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' => [
            'margin' => [
                'type' => \LivewirePageBuilder\Props\Margin::class,
                'label' => __('Margin'),
                'default' => [
                    'left' => 0,
                    'right' => 0,
                    'top' => 0,
                    'bottom' => 0,
                    'unit' => 'px'
                ],
                'rules' => ['nullable', 'array'],
            ],
        ]
    ];
}