Blade components

Laravel 7 Blade components

All field types except SpatieTags has a corresponding Blade component class. You'll find them in the config file. You can extend them or replace them with your own, BUT you must keep the tall prefix.

Config file

'components' => [
    'form' => Components\Form::class,
    'label-field-wrapper' => Components\LabelFieldWrapper::class,
    'field-root' => Components\FieldRoot::class,
    'input' => Components\Input::class,
    'image-cropper' => Components\ImageCropper::class,
    'range' => Components\Range::class,
    'textarea' => Components\Textarea::class,
    'checkbox' => Components\Checkbox::class,
    'checkboxes' => Components\Checkboxes::class,
    'radio' => Components\Radio::class,
    'file-upload' => Components\FileUpload::class,
    'select' => Components\Select::class,
    'search' => Components\Search::class,
    'trix' => Components\Trix::class,
    'svg' => Components\Svg::class,
],

This package also includes some tall-stack form components that you can use anywhere in your project (without making a form). Registered blade components in the packages service provider.

Blade::component('tall-forms::components.button', 'tall-button');
Blade::component('tall-forms::components.spinners.button', 'tall-spinner');
Blade::component('tall-forms::components.error-icon', 'tall-error-icon');
Blade::component('tall-forms::components.notification', 'tall-notification');

Example Button

<x-tall-button tag="a" :href="route('someroute')" text="Click here" color="blue" />
<x-tall-button type="submit" text="Submit" size="xl" color="green" />

properties with default values and options

@props([
'tag' => 'button', //or a
'size' => 'md', //options: xs, sm, md, lg, xl
'type' => 'button', //or submit
'icon' => null, //string
'text' => null, //string
'color' => 'indigo', //options: white, indigo, blue, green, yellow, red, gray, orange, teal
])

Theme

/* buttons */
    .tf-btn {
        @apply inline-flex items-center border font-semibold uppercase tracking-wider rounded focus:outline-none;
    }
    .tf-btn-info {
        @apply text-gray-100 tf-bg-info hover:bg-blue-600 hover:text-white focus:border-blue-700;
    }
    .tf-btn-success {
        @apply text-gray-100 tf-bg-success hover:bg-green-600 hover:text-white focus:border-green-700;
    }
    .tf-btn-danger {
        @apply text-gray-100 tf-bg-danger hover:bg-red-700 hover:text-white focus:border-red-700 focus:shadow;
    }
    .tf-btn-warning {
        @apply text-gray-100 tf-bg-warning hover:bg-orange-500 hover:text-white focus:border-orange-700 focus:shadow;
    }
    .tf-btn-primary {
        @apply text-gray-100 tf-bg-primary hover:bg-blue-800 hover:text-white focus:border-blue-800 focus:shadow;
    }
    .tf-btn-secondary {
        @apply text-gray-100 tf-bg-secondary hover:bg-blue-800 hover:text-white focus:border-blue-800 focus:shadow;
    }
    .tf-btn-white {
        @apply border-gray-300 bg-white text-gray-700 hover:text-gray-500 focus:border-blue-300 focus:shadow;
    }
    .tf-btn-indigo {
        @apply text-indigo-100 bg-indigo-500 hover:bg-indigo-600 focus:border-indigo-700 focus:shadow;
    }
    .tf-btn-blue {
        @apply text-blue-100 bg-blue-500 hover:bg-blue-600 focus:border-blue-700 focus:shadow;
    }
    .tf-btn-green {
        @apply text-green-100 bg-green-500 hover:bg-green-600 focus:border-green-700 focus:shadow;
    }
    .tf-btn-yellow {
        @apply text-yellow-100 bg-yellow-500 hover:bg-yellow-600 focus:border-yellow-700 focus:shadow;
    }
    .tf-btn-red {
        @apply text-red-100 bg-red-500 hover:bg-red-600 focus:border-red-700 focus:shadow;
    }
    .tf-btn-gray {
        @apply text-gray-100 bg-gray-500 hover:bg-gray-600 focus:border-gray-700 focus:shadow;
    }
    .tf-btn-orange {
        @apply text-orange-100 bg-orange-500 hover:bg-orange-600 focus:border-orange-700 focus:shadow;
    }
    .tf-btn-teal {
        @apply text-teal-100 bg-teal-500 hover:bg-teal-600 focus:border-teal-700 focus:shadow;
    }

Notification component

See Notifications

How to extend a fields Blade component

Let's say you want to extend the FieldRoot

1. Create a Blade component

php artisan make:component FieldRoot

2. Extend and replace any method

If you want to change the FieldRoot class() method then 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 ? ' tf-fields-root-py-inarray ' : ' tf-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));
    }
}

3. 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

4. Thats all -> done :)