https://github.com/simtabi/laramodal
https://github.com/simtabi/laramodal
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/simtabi/laramodal
- Owner: simtabi
- License: mit
- Created: 2021-09-21T19:54:50.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T19:14:45.000Z (over 3 years ago)
- Last Synced: 2025-09-01T02:44:00.479Z (10 months ago)
- Language: Blade
- Size: 50.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Livewire Modal
Turn any Laravel Livewire Component into Modal.
## 🏷 Features
- 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
## 🧾 Requirements
- Bootstrap 5
- Laravel >= 7
- Livewire >= 2.0
- Alpine JS
## 📥 Installation
```shell
composer require simtabi/laramodal
```
#### Include the base modal component
```html
...
@laramodalStylesInit
...
@laramodalScriptsInit
```
#### Publish assets
```shell
php artisan vendor:publish --force --tag=laramodal:assets
```
#### Publish config
```shell
php artisan vendor:publish --force --tag=laramodal:config
```
> config support bootstrap theme: bs5
### 📌 Updating
> **Important:** when updating the package make sure to re-publish the assets with `--force` flag
```shell
php artisan vendor:publish --force --tag=laramodal:assets
```
## ⚗️ Usage
### 
Create Livewire Component
No consideration required, create livewire component as usual. Use livewire's `mount` to handle passed parameters
### ✨ Open Modal
###### ✔️ From Alpine Component
```html
open
```
###### ✔️ Via Vanilla JS
```html
open
```
###### ✔️ Via Trigger Blade Component
```html
{{__('Title')}}
```
###### ✔️ From Livewire Class
```php
$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);
```
> 💡 Modal size supports `sm` `lg` `xl` *// completely optional*
#### ✌🏼 Two reasons to use this component
🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes
🟢 alert notification message which can be triggered by:
```php
$this->info('Hi !, i am an alert'); // support `info` `warning` `success` `danger`
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
## 👋🏼 Say Hi!
Leave a ⭐ if you find this package useful 👍🏼,
don't forget to let me know in [Twitter](https://twitter.com/simtabi)