TALL-forms
  • TALL-forms
  • Installation
    • Quickstart: Artisan cmd
    • Manual installation
      • Package
      • Translations
      • Css & Theme
      • Javascript
      • Tailwind
      • Laravel Mix
      • Wrapper view
      • Laravel Jetstream/Breeze
  • Upgrade v7 to v8
    • Configuration changes
    • Component & Field changes
    • Blade view changes
    • Notification changes
    • Styling changes
  • Concept
    • Configuration
    • Validation
    • Styling
    • Icons
    • Javascript
    • Layout vs Wrapper
    • Model binding
    • Manually saving data
    • Extend Blade Components
  • Create Forms
    • Form Data
    • Form Types
      • Standard form
      • As modal
      • Without buttons
      • Fields only
      • Headless
    • Form attributes
    • Form buttons
    • Form slots
    • Form methods
    • Lifecycle hooks
    • Render a form
    • Mass generate
  • Fields
    • Declaration
    • Labels
    • Field Slots
    • Field methods
    • Custom field attributes
    • Conditional field
    • Custom view
    • Custom field
    • Custom Livewire component
    • Relations
    • Fields
      • Checkbox
      • Checkboxes
      • FileUpload
      • Honeypot
      • ImageCropper
      • Input
      • Password
      • InputArray
      • KeyVal (array)
      • Radio
      • Range
      • Repeater (array)
      • Search
      • Select & Multiselect
      • Tags
      • TagsSearch
      • Textarea
      • Trix
      • SpatieTags
    • Sponsor Fields
      • More Inputs
      • CKEditor
      • DatePicker
      • Heading
      • Markdown
      • Panels
      • SearchList
      • SelectOptGroup
      • Tabs
      • Trix, file-uploads
  • Blade components
    • Notifications
    • Label wrapper
    • Button
    • Modal blade component
    • Modal form blade component
  • Examples
    • Input examples
    • Array fields example
Powered by GitBook
On this page

Was this helpful?

  1. Concept

Styling

Publishing the form view files: (NOT Recommended!)

  • Most styling can be customized in the theme css

  • Each field has a lot of styling options that hopefully covers your needs, if not - please create a feature or PR.

  • Every field also has a blade component class you can extend or replace.

If you still decide to publish the views it would be a good idea to watch this package for changes.

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

Chainable methods that controls the field design

//position
inline() //Labels to the left, override Form attribute 'inline'
stacked() //Labels above, override Form attribute 'inline'

//width
colspan(int $cols) //12 grid

//field classes
fieldWidth(string $class)
class(string $classes, bool $merge = true) //Merge or replace the fields default classes
wrapperClass(string $class)
errorClass(string $classes, bool $append = true) //Append or replace the fields default error classes

//labels
labelWidth(string $class) //Used only on inline forms. Default = sm:w-1/3
labelWrapperClass(string $classes)
labelClass(string $classes, bool $merge = true) //$merge = append to field default classes
labelAlign(string $class)
hideLabel()

Example

//example
KeyVal::make('Name')->labelClass('mb-0')->fields([
    Input::make('English', 'en')->colspan(6)->labelClass('font-medium capitalize my-0', true)->rules('required'),
    Input::make('Swedish', 'sv')->colspan(6)->labelClass('font-medium capitalize my-0', true)->rules('required'),
])
protected function formAttr()
{
    return [
        'inline' => true, //see images, can be overriden on individual fields
        'inlineLabelAlignment' => 'string w classes', //Label alignment, default = config('tall-forms.component-attributes.inline-label-alignment'),
        'labelW' => 'string w classes', //Width of the label column, default = config('tall-forms.component-attributes.label-width')
        'fieldW' => 'string w classes', //Width of the field column, default = config('tall-forms.component-attributes.label-width')
    ];
}

$inline = true

$inline = false

  • You find the Blade classes in the config files, extend or replace them.

  • Don't change the array keys.

  • The blade prefix is tall

config/tall-forms

'components' => [
    'form' => Components\Form::class,
    'label-field-wrapper' => Components\LabelFieldWrapper::class,
    'field-root' => Components\FieldRoot::class,
    'input' => Components\Input::class,
    'input-array' => Components\InputArray::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,
]

config/tall-forms-sponsors

'components' => [
    'search-list' => Components\SearchList::class,
    'select-optgroup' => Components\SelectOptGroup::class,
    'date-picker' => Components\DatePicker::class,
    'date-picker-alpine' => Components\DatePickerAlpine::class,
    'ckeditor' => Components\CKEditor::class,
]

It is not recommended to publish the views

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

Last updated 3 years ago

Was this helpful?

Defaults, see tall-forms file.

Most styling can be customized in the theme css. See installation page

config
Theme