1. Go to this page and download the library: Download wire-elements/modal library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
wire-elements / modal example snippets
namespace App\Http\Livewire;
use LivewireUI\Modal\ModalComponent;
class EditUser extends ModalComponent
{
public function render()
{
return view('livewire.edit-user');
}
}
namespace App\Http\Livewire;
use App\Models\User;
use LivewireUI\Modal\ModalComponent;
class EditUser extends ModalComponent
{
// This will inject just the ID
// public int $user;
public User $user;
public function mount()
{
Gate::authorize('update', $this->user);
}
public function render()
{
return view('livewire.edit-user');
}
}
namespace App\Http\Livewire;
use App\Models\User;
use LivewireUI\Modal\ModalComponent;
class EditUser extends ModalComponent
{
public User $user;
public function mount()
{
Gate::authorize('update', $this->user);
}
public function update()
{
Gate::authorize('update', $this->user);
$this->user->update($data);
$this->closeModal();
}
public function render()
{
return view('livewire.edit-user');
}
}
public function update()
{
Gate::authorize('update', $this->user);
$this->user->update($data);
$this->forceClose()->closeModal();
}
public function update()
{
Gate::authorize('update', $this->user);
$this->user->update($data);
$this->closeModalWithEvents([
UserOverview::class => 'userModified',
]);
}
public function update()
{
$this->user->update($data);
$this->closeModalWithEvents([
UserOverview::class => ['userModified', [$this->user->id]],
]);
}
public static function closeModalOnEscape(): bool
{
return false;
}
public static function closeModalOnClickAway(): bool
{
return false;
}
public static function closeModalOnEscapeIsForceful(): bool
{
return false;
}
public static function dispatchCloseEvent(): bool
{
return true;
}
public static function destroyOnClose(): bool
{
return true;
}
namespace App\Http\Livewire;
use App\Models\Team;
use LivewireUI\Modal\ModalComponent;
class DeleteTeam extends ModalComponent
{
public Team $team;
public function mount(Team $team)
{
$this->team = $team;
}
public function delete()
{
Gate::authorize('delete', $this->team);
$this->team->delete();
$this->skipPreviousModal()->closeModalWithEvents([
TeamOverview::class => 'teamDeleted'
]);
}
public function render()
{
return view('livewire.delete-team');
}
}
return [
/*
|--------------------------------------------------------------------------
| Include CSS
|--------------------------------------------------------------------------
|
| The modal uses TailwindCSS, if you don't use TailwindCSS you will need
| to set this parameter to true. This includes the modern-normalize css.
|
*/
'include_css' => false,
/*
|--------------------------------------------------------------------------
| Include JS
|--------------------------------------------------------------------------
|
| Livewire UI will inject the nent_defaults' => [
'modal_max_width' => '2xl',
'close_modal_on_click_away' => true,
'close_modal_on_escape' => true,
'close_modal_on_escape_is_forceful' => true,
'dispatch_close_event' => false,
'destroy_on_close' => false,
],
];