A flexible and design-agnostic Laravel Livewire modal package that works seamlessly with Bootstrap, Tailwind CSS, or custom styles. Easily integrate dynamic modals in your Laravel projects without being tied to any specific CSS framework.
MIT License
A simple and flexible Laravel Livewire modal package that works seamlessly with any design framework like Bootstrap, Tailwind CSS, or even custom styles. This package allows you to quickly integrate modals into your Livewire projects without being tied to specific CSS libraries.
You can install the package via Composer:
composer require sagor110090/livewire-modal
Add the following to your app.blade.php
layout to enable modals throughout your application:
<livewire:modals/>
Include the required JavaScript and CSS files in your resources/js/app.js
:
import '../../vendor/sagor110090/livewire-modal/resources/js/loader.js';
import '../../vendor/sagor110090/livewire-modal/resources/css/loader.css';
To open a modal, you can dispatch a Livewire event from any button or action:
<button wire:click="$dispatch('openModal', { component: 'edit-user', data: { id: {{ $user->id }} } })">
Open Modal
</button>
To close a modal, simply dispatch the close event:
<button type="button" wire:click="$dispatch('closeModal')">
Cancel
</button>
Here’s an example of a Livewire component you might use with this package:
<?php
namespace App\Livewire;
use App\Models\User;
use Livewire\Component;
class EditUser extends Component
{
public $user;
public function mount($id)
{
$this->user = User::find($id);
}
public function render()
{
return view('livewire.edit-user');
}
}
The modal content is fully customizable within your Livewire component's view file:
<!-- resources/views/livewire/edit-user.blade.php -->
<div>
<h2>Edit User: {{ $user->name }}</h2>
<!-- Your form or content here -->
</div>
You can use any CSS framework or custom styles in this view file. The package does not impose any specific design restrictions.
You can design the modal with any framework. Below is an example using Tailwind CSS:
<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
<div class="bg-white rounded-lg shadow-lg p-6">
<!-- Modal Content -->
</div>
</div>
Alternatively, use Bootstrap or any other CSS framework.
This Laravel Livewire modal package is designed to be lightweight and versatile, providing developers with an easy way to implement customizable modals across different design frameworks. Whether you're using Bootstrap, Tailwind CSS, or custom styles, this package adapts to your needs without locking you into specific CSS libraries. Enhance your Laravel projects with a modular and framework-agnostic approach to modals.
For any issues or feature requests, feel free to open an issue.
This package is open-source software licensed under the MIT license.