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
  • Extend the TallFormInModal component
  • Steps
  • Create the form
  • Create a button and pass a $modelKey
  • Add the modal form component
  • Button colors
  • Override methods
  • Styling
  • Modal sizes

Was this helpful?

  1. Create Forms
  2. Form Types

As modal

Requires an Eloquent Model

PreviousStandard formNextWithout buttons

Last updated 3 years ago

Was this helpful?

Extend the TallFormInModal component

  • The modal can be placed anywhere but for z-index reasons, it's best to put it near the closing </body> tag.

  • The component automatically loads the model and resets the form when the listener receives the emitted event.

  • You have access to all TallForms methods and properties except the $headView.

Steps

Create the form

Command option --action=modal will set the component to extend TallFormInModal. See form, for more options

php artisan make:tall-form UserModalForm --action=modal --model=User
namespace App\Http\Livewire\Forms;

use App\Models\User;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\TallFormInModal;

class UserModalForm extends TallFormInModal
{
     /*
     * button color presets:
     * white, indigo, blue, green, yellow, red, gray, orange, teal, info, success, danger, warning, primary, secondary
     public string $closeBtnColor = 'white';
     public string $submitBtnColor = 'primary';

     * Methods to override
     public function loadModal(int|string $modelKey): void
     public function closeModal(): void
     public function modalSubmit(): void
     */
    
    public function mount()
    {
        $this->mount_form(new User);
    }

    protected function formAttr(): array
    {
        return [
           'formTitle' => 'Edit user',
           'formSubtitle' => 'Form Subtitle slot',
           'modalMaxWidth' => 'xl', //default = 'lg', options: sm, md, lg, xl, 2xl
       ];
    }
    
    protected function fields(): array
    {
        return [
            Input::make('Name')->rules('required'),
        ];
    }
}

Create a button and pass a $modelKey

Add a button to any blade view, that $emits a $model->id to your Form component

//Example, emit to the form component, to load the User where id=1
//put this button in any blade view
<x-tall-button 
    size="md" 
    color="primary" 
    wire:click="$emitTo('forms.user-modal-form', 'openModal', 1)"
    text="Open Form Modal" />

Add the modal form component

The button and the form component does not have to be in the same Livewire component, but for z-index reasons, it is best placed near the closing </body> tag.

<livewire:forms.user-modal-form/>

Button colors

Available presets: white, indigo, blue, green, yellow, red, gray, orange, teal, info, success, danger, warning, primary, secondary. Set the colors in tall-form.css

public string $closeBtnColor = 'white';
public string $submitBtnColor = 'primary';

Override methods

You can override the default methods

public function loadModal(int|string $modelKey): void
public function closeModal(): void
public function modalSubmit(): void

Styling

Search for Modals in tall-theme.cssThe modal styling is based on the Laravel Jetstream modal component.

Modal sizes

  • Set the modalMaxWidth in the formAttr() function.

  • Available options are; sm, md, lg, xl, 2xl

  • Default = lg

  • You can change the defaults in config.

    protected function formAttr(): array
    {
        return [
           'modalMaxWidth' => 'xl',
       ];
    }

Standard