Vertical Spacing

How to extend a blade component.

In this example we want to change the vertical spacing between the fields. We will extend the existing Blade component and override the class() method in the FieldRoot::class.

Create a Blade component

php artisan make:component FieldRoot

In this case it's enough to extend the original blade component and replace the class() method.

<?php

namespace App\View\Components;

use Tanthammar\TallForms\Components\FieldRoot as OriginalFieldRoot;
use Tanthammar\TallForms\Traits\Helpers;

class FieldRoot extends OriginalFieldRoot
{
    public function class(): void
    {
        $vertical_space = $this->inArray ? ' tall-forms-fields-root-py-inarray ' : ' tall-forms-fields-root-py-not-inarray '; //this is where you set the vertical spacing
        $colspan = config('tall-forms.col-span-classes')[$this->colspan];
        $class = data_get($this->attr, 'class', config('tall-forms.field-attributes.root.class'));
        data_set($this->attr, 'class', Helpers::unique_words($class . $vertical_space . $colspan));
    }
}

Import and replace the component in tall-forms config.

<?php
//Import the blade component at the top of your config
use App\View\Components\FieldRoot;

//components
        'field-root' => FieldRoot::class,

php artisan config:clear

php artisan view:clear

Thats all -> done :)