New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Modal

Modal component.

<x-modal>
TallStackUi
</x-modal>
<x-modal>
<x-slot:title>
TallStackUi
</x-slot:title>
TallStackUi
</x-modal>
 
<!-- or -->
 
<x-modal title="TallStackUi">
TallStackUi
</x-modal>
<!-- sm, md, lg, xl -->
 
<x-modal title="TallStackUi" blur> <!-- sm blur -->
TallStackUi
</x-modal>
<!-- sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl -->
 
<x-modal title="TallStackUi" size="2xl">
TallStackUi
</x-modal>

Applicable only on desktop devices.

<x-modal title="TallStackUi" center>
TallStackUi
</x-modal>

Applicable only on desktop devices.

<x-modal title="TallStackUi" z-index="z-10">
TallStackUi
</x-modal>

An option to prevent the closing when click outside.

<x-modal title="TallStackUi" persistent>
TallStackUi
</x-modal>

Make sure to provide some way to close the modal when using this option, such as a button within the modal.

An option to control the modal via Livewire.

<!-- Livewire boolean property: $modal -->
 
<x-modal title="TallStackUi" wire>
TallStackUi
</x-modal>
 
<x-button wire:click="$toggle('modal')">
Open
</x-button>

Customize which property to use to control the modal via Livewire.

<!-- Livewire boolean property: $tallstackui -->
 
<x-modal title="TallStackUi" wire="tallstackui">
TallStackUi
</x-modal>
 
<x-button wire:click="$toggle('tallstackui')">
Open
</x-button>

Helpers to open and close the modal using AlpineJS.

<x-modal id="modal-id">
TallStackUi
</x-modal>
 
<x-button x-on:click="$modalOpen('modal-id')">
Open
</x-button>
 
<x-button x-on:click="$modalClose('modal-id')">
Close
</x-button>

An option to listen event when the modal is opening or closing.

<x-modal title="TallStackUi"
x-on:open="alert('Opened!')"
x-on:close="alert('Closed!')">
TallStackUi
</x-modal>
This component contains settings available in the configuration file. Click here to learn more.

Code highlighting provided by Torchlight