Modals

Introduction

To use a modal, there are certain steps that need to be followed for everything to work seamlessly. Below are the steps:

• Create a livewire php file for the modal

• Create a blade file to house the modal UI code

• Trigger modal from your section.

Create a Livewire File

Let's start by creating a php file (a php class that extends ModalComponent) to handle the properties that would be required for display for our modal.

Example, Let's create a php file named; Image.php within app/Http/Sections/{site-name}/Modals directory and add this code. Feel free to modify the code to handle properties you intend to display.

<?php

namespace App\Http\Sections\BrooklynBedding\Modals;

use LivewireUI\Modal\ModalComponent;

class Image extends ModalComponent
{
    public string $image;

    public function mount(string $image)
    {
        $this->image = $image;
    }

    /**
     * Supported: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
     */
    public static function modalMaxWidth() : string
    {
        return '6xl';
    }

    public function render()
    {
        return view('brooklyn-bedding.modals.image');
    }
}

Notice how we specified $image as a string; meaning we are interested in the image path or media path (if it is a different media type other than an image). Data types here are restricted to simple types that JavaScript can understand such as: int, array, string or object.

The render method needs to return the corresponding blade file.

Create a Blade File

Let's create a blade file to organize the content on the modal.

Example, Let's create a blade file named; image.blade.php within resources/views/{site-name}/modals directory and add this code. Feel free to modify the UI code to your desired style.

<div class="bg-sand-light h-full font-sans p-12 lg:p-32">
    <div>
        <img src="{{ $image }}" class="w-full object-center object-contain sm:rounded-lg">
    </div>
</div>

Trigger Modal from Section

Finally, we can launch a modal from any section and pass the requried properties.

Example, from within your section; trigger the modal popup this way:

<div x-data>
    <div x-on:click="$modal.open('image', {{ json_encode([
             'image' => $this->imageURLToUse,
         ]) }})">
    </div>
</div>