Skip to content

BaseField Styling

tanthammar edited this page Oct 24, 2020 · 11 revisions

Inline Methods

->fieldWidth(string $class)

  • Default w-full sm:w-2/3. $class will be appended to w-full.

->inline()

Display the label to the left of the field. Overrides the form component inline attribute.

->stacked()

Display the label above the field. Overrides the form component inline attribute.

->colspan(int $cols)

  • Default 12 of 12 columns

->class(string $classes, $merge = true)

  • Merge or replace classes on the field wrapper div

->labelClass(string $classes, $merge = true)

  • Merge or replace the theme tall-forms-label class

Extend or override the blade component class

See Custom Field to understand the code structure and Blade Components for class names. The docs for each field type also states the name of the corresponding Blade class.

Defaults = the config file

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

Override configs on individual fields

With these methods you merge OR override the field-attribute values set in the config file.

Input::make('Name')->labelAttr('bg-green-300') //merge with config
Input::make('Name')->labelAttr('bg-green-300', false) //replace config

Not just for styling, write Alpine in backend

The methods are not just for styling you can set any attributes on the elements. See another example on the Form Slots page.

Input::make('Name')
    ->rootAttr([
       'x-data' => "{ foo: 'bar'}",
       'class' => 'border rounded',
    ])
    ->inputAttr([
        'x-init' => "foo = 'baz'"
    ])
    ->required(),

->inputAttr()


IMPORTANT!: Do NOT set any wire:model... with these methods, use wire() instead, otherwise, it will be applied twice.

->rootAttr(array $attributes, bool $merge = true)

  • Override field-attribute['root'] in the config file

->beforeAttr(array $attributes, bool $merge = true)

  • Override field-attribute['before'] in the config file

->beforeTextAttr(array $attributes, bool $merge = true)

  • Override field-attribute['before-text'] in the config file

->aboveAttr(array $attributes, bool $merge = true)

  • Override field-attribute['above'] in the config file

->belowAttr(array $attributes, bool $merge = true)

  • Override field-attribute['below'] in the config file

->belowWrapperAttr(array $attributes, bool $merge = true)

  • Override field-attribute['below-wrapper'] in the config file

->afterTextAttr(array $attributes, bool $merge = true)

  • Override field-attribute['after-text'] in the config file

->afterLabelAttr(array $attributes, bool $merge = true)

  • Override field-attribute['after-label'] in the config file
Clone this wiki locally