Modals / Dialogos en Flux Laravel Livewire

Vamos a conocer el funcionamiento de los modals en Flux con Laravel Livewire.

El diálogo de confirmación que vamos a presentar es como quien dice nativo al a la librería de componentes que estamos empleando que en este caso sería Flux para nuestra aplicación en Laravel Livewire aquí muy posiblemente tú tengas el enfoque que hicimos antes que era mediante el confirm de javascript.

Tenemos un componente de Modal:

<flux:modal name="NAME">
   *** CONTENT ***
</flux:modal>

En el contenido, puedes colocar cualquier cosa, en nuestro caso, será un mensaje como el siguiente:

<flux:modal name="delete-category">
   <div class="m-1">
       <flux:heading>{{ __('Delete Category') }}</flux:heading>
       <flux:text class="mt-2">{{ __('Are you sure you want to delete this category?') }}</flux:text>

       <div class="flex flex-row-reverse">
       <flux:button class="mt-4" variant='danger' icon="trash">
           {{ __('Delete') }}
       </flux:button>
       </div>
   </div>
</flux:modal>

Activar el modal

Fíjate que es sencillito flux modal Trigger aquí el nombre es importante:

<flux:modal.trigger name="delete-category">
    <flux:button class="ml-3" variant='danger' size="xs">{{ __('Delete') }}</flux:button>
</flux:modal.trigger>

Ya que con el nombre perdón este es el botón para ver este el modal está el botón creo que hay uno más sencillo flux modal bueno esto sería desde el componente interesante aquí sería mediante javascript flux modal:

<button x-on:click="$flux.modal('confirm').show()">
   Open modal
</button>

<button x-on:click="$flux.modal('confirm').close()">
   Close modal
</button>

<button x-on:click="$flux.modals().close()">
   Close all modals
</button>

***

// Control "confirm" modals anywhere on the page...
Flux.modal('confirm').show()

Tenemos también flux model triger que sería el botón que mostramos antes y mediante el objeto wire:

<flux:button x-on:click="$wire.showConfirmModal = true">Delete post</flux:button>

Cerrar el Modal

Para cerrar el modal, lo puedes cancelar si le das click afuera o si le haces click en la x Entonces ya colocar un tercero me parece redundante

Conclusiones

En definitiva flux modal el mismo nombre aquí colocas lo que te vengan gana realmente y luego Para activarlo tenemos como cuatro maneras distintas realmente pero como quien dice la que no está empleando ya al menos de manera directa y por lo tanto fue la que utilizamos sería la de flux model triger es decir el detonante aquí colocas el detonante que en este caso es un botón al pegarle un click simplemente se activa en base al nombre seleccionado que otra vez Tiene que ser el mismo que que el del modal y aquí personaliza el diseño como tú quieras en este caso utilizamos el mismo que tenía acá por lo Además así de fácil funciona el modal qué es lo que quieras hacer con el modal ya depende de ti como puedes ver en el ejemplo oficial Ahí están colocando un formulario para editar el perfil o algo por el estilo.

01-04-2025 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Modals / Dialogos en Flux Laravel Livewire