-
-
Notifications
You must be signed in to change notification settings - Fork 86
BaseField Styling
tanthammar edited this page Oct 24, 2020
·
11 revisions
- Default
w-full sm:w-2/3
.$class
will be appended tow-full
.
Display the label to the left of the field. Overrides the form component inline attribute.
Display the label above the field. Overrides the form component inline attribute.
- Default 12 of 12 columns
- Merge or replace classes on the field wrapper div
- Merge or replace the theme
tall-forms-label
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.
php artisan vendor:publish --tag=tall-form-config
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
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(),
- Read about it on the Attributes page
IMPORTANT!: Do NOT set any wire:model...
with these methods, use wire()
instead, otherwise, it will be applied twice.
- Override
field-attribute['root']
in the config file
- Override
field-attribute['before']
in the config file
- Override
field-attribute['before-text']
in the config file
- Override
field-attribute['above']
in the config file
- Override
field-attribute['below']
in the config file
- Override
field-attribute['below-wrapper']
in the config file
- Override
field-attribute['after-text']
in the config file
- Override
field-attribute['after-label']
in the config file
- Installation
- Requirements
- v5 Upgrade Guide
- v6 Upgrade Guide
- v7 Upgrade Guide
- Support
- Quickstart
- Manual installation
- Optional
- Form component
- Field
- Field types
- Example Form
- Blade Components
- Notifications