Delete Confirmation Modal Component - Livewire
Tech Stack: tailwindcss, alpine-js, livewire
Demo
Name | Delete | |
---|---|---|
Dr. Ernestine Boehm II | dorn@example.com | |
Citlalli Fisher | lorenz.harvey@example.net | |
Dr. Marty Stoltenberg | albina67@example.net | |
Demetrius Mitchell DVM | berneice06@example.org | |
Mr. Thad Cruickshank MD | dayna.williamson@example.org | |
Jordi Runolfsson | lwiza@example.org | |
Dr. Tina Roob | aondricka@example.com | |
Anastacio Waelchi | marlon36@example.org | |
Carlos Weissnat | johnson.heaven@example.net | |
Landen Farrell | melvin.ledner@example.net |
Code
Please login to View/Download the Code
Please login to View/Download the Code
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Usage
Include the component on the page from where you want to invoke the modal. You can also choose it and include it on the gobal template
@livewire('delete-modal-component')
To invoke the confirmation modal with the click of the delete button. You can emit the event to the model using Livewire's emitTo
method.
Here is an example of emitting the event through Alpine JS
<button class="btn btn-danger text-white" x-data={}
x-on:click="window.livewire.emitTo('delete-modal-component','showModal', 'App\\Models\\DummyUser', {{$dummyUser->id}}, 'Delete User', 'Are you sure you want to delete user {{$dummyUser->name}}')"><i class="fa fa-trash-alt"></i></button>
Here, we are passing four parameters in the emitTo method.
- Component where we want to send the event (delete-modal-confirm in this case)
- Method to which we want to send the event to (showModal in this demo)
- Modal which you want to delete (App\\Models\\DummyUser) in this example
- Id of the modal which we are looking to delete
- Modal Heading
- Modal Message.