Estados sin conexión

En aplicaciones en tiempo real, puede ser útil proporcionar una indicación visual de que el dispositivo del usuario ya no está conectado a Internet.

Livewire proporciona la directiva wire:offline para estos casos.

Añadiendo wire:offline a un elemento dentro de un componente Livewire, se ocultará por defecto y se hará visible cuando el usuario pierda la conexión:

<div wire:offline>
    Este dispositivo está actualmente sin conexión.
</div>

Conmutación de clases

Añadir el modificador de class permite añadir una clase a un elemento cuando el usuario pierde su conexión. La clase se eliminará de nuevo, una vez que el usuario vuelva a estar conectado:

<div wire:offline.class="bg-red-300">

O, usando el modificador .remove, puedes eliminar una clase cuando un usuario pierde su conexión. En este ejemplo, la clase bg-green-300 se eliminará del <div> mientras el usuario haya perdido su conexión

div class="bg-green-300" wire:offline.class.remove="bg-green-300">

Conmutación de atributos

El modificador .attr permite añadir un atributo a un elemento cuando el usuario pierde su conexión. En este ejemplo, el botón “Guardar” se desactivará mientras el usuario haya perdido su conexión:

<button wire:offline.attr="disabled">Guardar</button>