Form Styling

Component properties related to styling

    public bool $inline = true;
    public string $inlineLabelAlignment;

    public string $labelW;
    public string $fieldW;

bool $inline

Can be overridden in field declaration

true

false

string $inlineLabelAlignment

• A class to set the alignment of the label, in the label column,
• default is config('tall-forms.component-attributes.inline-label-alignment').

string $labelW

• A class to set the width of the label column,
• default is config('tall-forms.component-attributes.label-width').

string $fieldW

• A class to set the width of the field column,
• default is config('tall-forms.component-attributes.field-width').

Other options and attributes = tall-forms config file.

Please read more on the BaseField/Attributes AlpineJS page

php artisan vendor:publish --tag=tall-form-config

Styling

• Most styling is made in the theme file
• Some parts of the main form component has Blade component classes you can extend or replace
• You can (not recommended) publish the views

php artisan vendor:publish --tag=tall-form-views 

Theme

 /* form */
    .tf-form {
        @apply w-full;
    }

    .tf-form-head {

    }

    .tf-form-title {
        @apply text-lg leading-6 font-medium text-gray-900;
    }

    .tf-form-sub-title {
        @apply mt-1 max-w-2xl text-sm leading-5 text-gray-500;
    }

    .tf-form-footer {
        @apply border rounded sm:p-4;
    }

    .tf-form-footer-title {
        @apply text-lg leading-6 font-medium text-gray-900;
    }

    .tf-form-footer-sub-title {
        @apply mt-1 max-w-2xl text-sm leading-5 text-gray-500;
    }

    /* help and error <p> */
    .tf-help {
        @apply leading-tight text-gray-500 text-sm;
    }

    .tf-error {
        @apply italic leading-tight text-red-500 text-sm;
    }

    .tf-field-error {
        @apply border-red-500 text-red-900 placeholder-red-500 focus:border-red-500;
    }


    /* Buttons */
    .tf-buttons-root {
        @apply w-full border-t border-gray-200 pt-5;
    }

    .tf-buttons-wrapper {
        @apply flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3 sm:justify-end sm:items-center;
    }


    /* background colors */
    .tf-bg-success {
        background-color: #5cb85c;
        border-color: #4cae4c;
    }
    .tf-bg-danger {
        background-color: #d9534f;
        border-color: #d43f3a;
    }
    .tf-bg-info {
        background-color: #5bc0de;
        border-color: #46b8da;
    }
    .tf-bg-warning {
        background-color: #f0ad4e;
        border-color: #eea236;
    }
    .tf-bg-primary {
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    .tf-bg-secondary {
        background-color: #5e9bd0;
        border-color: #3886ca;
    }

    /* text colors */
    .tf-text-success {
        color: #5cb85c;
    }
    .tf-text-danger {
        color: #d9534f;
    }
    .tf-text-info {
        color: #5bc0de;
    }
    .tf-text-warning {
        color: #eea236;
    }