Custom wrapper styling

In some cases, you may want to add custom css to the <x-lpb::component-wrapper>.

Here is how you can add custom css to the <x-lpb::component-wrapper>.

Add custom css to the wrapper

In the PHP Component class, you can add the following code:

public function getStyle(): string
{
    return 'background-color: #f0f0f0;';
}

getStyle method should return a string of css.

Styles will be applied directly to the <x-lpb::component-wrapper> element.

Example

use LivewirePageBuilder\Traits\PageBuilderComponent;
use LivewirePageBuilder\Contracts\PageBuilderComponentInterface;
use Livewire\Component;

class CustomComponent extends Component implements PageBuilderComponentInterface
{
    use PageBuilderComponent;

    public string $background_color = '#f0f0f0';
    public string $position = 'absolute';
    public string $top = '12px';
    public string $bottom = '12px';
    public string $left = '6px';
    public string $right = '6px';

    public function getStyle(): string
    {
        return "
            background-color: {$this->background_color};
            position: {$this->position};
            top: {$this->top};
            left: {$this->left};
            right: {$this->right};
            bottom: {$this->bottom};
        ";
    }
}