Turn any Laravel Livewire Component into Modal.
- Modal triggered by javascript i.e. opens instantly without waiting for livewire network round trip to finish ( no laggy feeling )
- Skeleton loading indicator
- Support alert message ( info, warning, success, danger )
- Trigger from Alpine Component / Vanilla JS / Livewire Class Component
- Bootstrap 5
- Laravel >= 7
- Livewire >= 2.0
- Alpine JS
composer require simtabi/laramodal<html>
<head>
...
@laramodalStylesInit
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
...
@laramodalScriptsInit
</body>
</html>php artisan vendor:publish --force --tag=laramodal:assetsphp artisan vendor:publish --force --tag=laramodal:configconfig support bootstrap theme: bs5
Important: when updating the package make sure to re-publish the assets with
--forceflag
php artisan vendor:publish --force --tag=laramodal:assetsNo consideration required, create livewire component as usual. Use livewire's mount to handle passed parameters
<div x-data>
<button type="button" x-on:click='$dispatch("open-x-modal", {
title: "Heading Title",
modal: "livewire-component-name",
size: "xl",
args: {{ json_encode($data_array) }}
})'>open
</button>
</div><button type="button" onclick='_openModal("Heading", "component-name", {{ json_encode($data) }}, "sm")'>
open
</button> <x-modal-trigger class="btn btn-lg btn-block btn-flex btn-primary btn-active-primary fw-bolder text-center"
modal="component-name"
:args="[]"
>
{{__('Title')}}
</x-modal-trigger>$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);💡 Modal size supports
smlgxl// completely optional
🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes
🟢 alert notification message which can be triggered by:
$this->info('<strong>Hi !</strong>, i am an alert'); // support `info` `warning` `success` `danger`Please see CHANGELOG for more information on what has changed recently.
The MIT License (MIT). Please see License File for more information.
Leave a ⭐ if you find this package useful 👍🏼, don't forget to let me know in Twitter