Modal
To create a modal use the modal container:
<x-modal> ... </x-modal>
Inside the container:
Set the trigger to open the modal:
<x-slot name="trigger">
<button @click="on = true" class="text-primary">
Open Modal
</button>
</x-slot>
Set the modal title:
<x-slot name="title">The Modal Title</x-slot>
Set the modal body:
<x-slot name="content">The Body</x-slot>
Set the modal footer:
<x-slot name="footer">The Footer</x-slot>
To change the classes edit the blade component at:
resources/views/components/modal.blade.php
Example:
The Modal Title
The Body
In Livewire components use the following code to fire a close event. This should be in the Livewire class.
$this->dispatchBrowserEvent('close-modal');
<x-modal>
<x-slot name="trigger">
<x-slot name="trigger">
<button @click="on = true" class="text-primary">Open Modal using a text style</button>
<button @click="on = true" class="btn btn-primary">Open Modal using a button style</button>
</x-slot>
</x-slot>
<x-slot name="title">The Modal Title</x-slot>
<x-slot name="content">
<p>The Body</p>
</x-slot>
<x-slot name="footer">
<button class="btn btn-primary" @click="on = false">Close</button>
</x-slot>
</x-modal>