Wrapper Layout

Creating a wrapper view is mandatory, using it, is optional!

• You have to create a wrapper view, otherwise you'll get an error when you run php artisan view:cache.
• If you don't want to use it, set $wrapWithView to false in the mount() method to disable this option.

Optional settings related to Layout and Wrapper

public function mount()
{
    $this->fill([
        //these settings are optional, the example shows the default values
        'wrapWithView' => true, //or false
        'wrapViewPath' => config('tall-forms.wrap-view-path'), //blade view path, used as @include($wrapViewPath)
        'layout' => "layouts.app", //blade view path, Default = Livewire looks for "layouts.app.blade.php"
    ]);
}

Quick setup

This setup matches the default config/tall-forms.php for 'wrap-view-path' => 'tall-forms::wrapper-layout'

1. Create a view resources/views/components/pages/default.blade.php
2. Add this:

<h2 class="font-semibold text-xl text-gray-800 leading-tight">
    {{ $title ?? null }}
</h2>
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-md sm:rounded-md p-12">
            {{ $slot }}
        </div>
    </div>
</div>

Step by step

1. Create a wrapper view

• Example path: resources/views/layouts/tall-form-wrapper-layout.blade.php
• the view must contain @include('tall-forms::form')

Example wrapper view for Laravel 8 using Jetstream or Breeze

<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ $formTitle ?? null }}
    </h2>
</x-slot>
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-12">
            @include('tall-forms::form')
        </div>
    </div>
</div>

2. Set your default wrapper view in config

Set your default view in the config/tall-forms.php file.

'wrap-view-path' => 'layouts.tall-form-wrapper-layout', //path.name-to-your-blade-view

In depth explanation

Understand the basics

This package is just a Trait for a Livewire component. It behaves like a standard Livewire component.

1. you can put it in a view and pass it a variable (Livewire inline component)
2. you can create a route that points directly to the component (Livewire full-page component)
3. apart from that, this package offers a way to wrap your components with a view and/or dynamically define a layout

It is important that you understand the Livewire basics on how to render inline and full-page components before using the techniques described on this page. (https://laravel-livewire.com/docs/2.x/rendering-components)

Concept

• Create a default view to wrap your forms with.
• The wrapper view can be placed anywhere in your project.
• You define your default wrapper view in the config file, or dynamically in your forms mount() method.
• IMPORTANT: Your view must contain @include('tall-forms::form')

Wrapper != Layout!

There is a difference between a wrapper view described on this page, and a layout file. Most Laravel projects have an app.blade.php in resources/layouts that either @yields('content') or has a {{ $slot }}.

Livewire looks for the app.blade.php by default. When defining a Route::get() that points to a Form component, the form will automatically be rendered in the {{ $slot }} of the layout.

If you combine this with a wrapper view the form will be wrapped with the view and then placed in the layout.

|-layout
    |-wrapper-view
       |-form

Next step -> Create Form