Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sagor110090/livewire-modal
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.
https://github.com/sagor110090/livewire-modal
bootstrap composer laravel livewire modal tailwindcss web-development
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/sagor110090/livewire-modal
- Owner: sagor110090
- License: mit
- Created: 2024-08-18T12:49:02.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-29T13:47:22.000Z (3 months ago)
- Last Synced: 2024-10-31T06:51:34.887Z (about 2 months ago)
- Topics: bootstrap, composer, laravel, livewire, modal, tailwindcss, web-development
- Language: PHP
- Homepage: https://freecoderteam.com/
- Size: 59.6 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Laravel Livewire Modal Package
[](https://packagist.org/packages/sagor110090/livewire-modal)
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.
## Features
- **Framework-Agnostic**: Use with Bootstrap, Tailwind CSS, or custom designs.
- **Dynamic Modals**: Open and close modals using Livewire events.
- **Customizable**: Easily style your modals with your preferred CSS.
## Installation
You can install the package via Composer:
```bash
composer require sagor110090/livewire-modal
```
### Setup
Add the following to your `app.blade.php` layout to enable modals throughout your application:
```blade
```
Include the required JavaScript and CSS files in your `resources/js/app.js`:
```js
import '../../vendor/sagor110090/livewire-modal/resources/js/loader.js';
import '../../vendor/sagor110090/livewire-modal/resources/css/loader.css';
```
## Usage
### Opening a Modal
To open a modal, you can dispatch a Livewire event from any button or action:
```html
Open Modal
```
- **component**: The name of the Livewire component you want to load.
- **data**: The data you want to pass to the component (e.g., user ID).
### Closing a Modal
To close a modal, simply dispatch the close event:
```html
Cancel
```
### Sample Livewire Component
Here’s an example of a Livewire component you might use with this package:
```php
user = User::find($id);
}
public function render()
{
return view('livewire.edit-user');
}
}
```
### Blade View Example
The modal content is fully customizable within your Livewire component's view file:
```blade
Edit User: {{ $user->name }}
```
You can use any CSS framework or custom styles in this view file. The package does not impose any specific design restrictions.
## Example Styles
You can design the modal with any framework. Below is an example using Tailwind CSS:
```blade
```
Alternatively, use Bootstrap or any other CSS framework.
## Why Use This Package?
- **Flexibility**: Unlike many modal packages, this one doesn't enforce a specific CSS framework, giving you full control over your design.
- **Ease of Use**: Simple to implement with just a few Livewire events.
- **Dynamic Data Handling**: Pass data seamlessly to your modals, making them fully dynamic.
## SEO Considerations
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.
## Support
For any issues or feature requests, feel free to [open an issue](https://github.com/sagor110090/livewire-modal/issues).
## License
This package is open-source software licensed under the [MIT license](LICENSE.md).