https://github.com/aliqasemzadeh/livewire-bootstrap-modal

Dynamic Laravel Livewire Bootstrap modals.
https://github.com/aliqasemzadeh/livewire-bootstrap-modal

boostrap bootstrap5 laravel laravel-livewire livewiere livewire-bootstrap-modal livewire-component livewire-laravel livewire-modal modal

Last synced: 30 days ago
JSON representation

Dynamic Laravel Livewire Bootstrap modals.

• Host: GitHub
• URL: https://github.com/aliqasemzadeh/livewire-bootstrap-modal
• Owner: aliqasemzadeh
• Created: 2022-02-25T03:16:20.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-03-15T07:35:38.000Z (8 months ago)
• Last Synced: 2024-03-15T08:43:49.610Z (8 months ago)
• Topics: boostrap, bootstrap5, laravel, laravel-livewire, livewiere, livewire-bootstrap-modal, livewire-component, livewire-laravel, livewire-modal, modal
• Language: PHP
• Homepage:
• Size: 58.6 KB
• Stars: 32
• Watchers: 3
• Forks: 11
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Laravel Livewire Modals

This package allows you to dynamically show your Laravel Livewire 3 components inside Bootstrap modals.

 **Warning:** This package is not backward compatible with Livewire 2.

## Documentation

- [Requirements](#requirements)

- [Installation](#installation)

- [Usage](#usage)

    - [Modal Views](#modal-views)

    - [Showing Modals](#showing-modals)

    - [Mount Parameters](#mount-parameters)

    - [Hiding Modals](#hiding-modals)

    - [Dispatching Modals](#dispatching-modals)

    - [Custom modal size](#custom-modal-size)

- [Publishing Assets](#publishing-assets)

    - [Custom View](#custom-view)

- [Notes](#notes)

## Requirements

- Bootstrap 5 and PopperJS must be installed via npm first

```console

npm install bootstrap

npm install @popperjs/core

```

## Installation

Require the package:

```console

composer require aliqasemzadeh/livewire-bootstrap-modal

```

Add the `livewire:modals` component to your app layout view:

```html

```

Require `../../vendor/aliqasemzadeh/livewire-bootstrap-modal/resources/js/modals` in your app javascript file:

```javascript

import('@popperjs/core');

import '../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';

import '../../vendor/aliqasemzadeh/livewire-bootstrap-modal/resources/js/modals.js';

```

## Usage

### Modal Views

Make a Livewire component you want to show as a modal. The view for this component must use the Bootstrap `modal-dialog` container:

```html



        


            
Modal title

            

        

        


            
Modal body text goes here.

        

        


            Close

            Save changes

        



 

```


### Showing Modals

Show a modal by emitting the `showModal` event with the component alias:

```html

    {{ __('Update Profile') }}

```

### Mount Parameters

Pass parameters to the component `mount` method after the alias:

```html

    {{ __('Update User #' . $user->id) }}

```

The component `mount` method for the example above would look like this: 

```php

namespace App\Http\Livewire\Users;

use App\Models\User;

use Livewire\Component;

class Update extends Component

{

    public $user;

    

    public function mount(User $user)

    {

        $this->user = $user;

    }

    

    public function render()

    {

        return view('users.update');

    }

}

```

### Hiding Modals

Hide the currently open modal by emitting the `hideModal` event:

```html

    {{ __('Close') }}

```

### Dismissing Modals

You can emit events inside your views:

```html

    {{ __('Close') }}

```

Or inside your components, just like any normal Livewire event:

```php

public function save()

{

    $this->validate();

    // save the record

    $this->dispatch('hideModal');

}

```

### Custom modal size

Now you can have custom modal size by default we use `modal-lg`:

```html

  {{ __('Show XL Modal') }}

```

## Publishing Assets

### Custom View

Use your own modals view by publishing the package view:

```console

php artisan vendor:publish --tag=livewire-bootstrap-modal:views

```

Now edit the view file inside `resources/views/vendor/livewire-bootstrap-modal`. The package will use this view to render the component.

## Notes

1- You should use button or @click in main slot.

2- We are working hard on some problems, We hope fix them soon.

3- We will add some options soon.

4- wire:navigate not work (just first modal open).