Offline State
It's sometimes important to notify a user if they have lost their internet connection. Livewire provides helpful utilities to perform actions based on a user's "offline" state.
Toggling elements
You can show an element on the page when the user goes "offline", by adding the wire:offline
attribute.
<div wire:offline>
You are now offline.
</div>
This <div>
will automatically be hidden by default, and shown to the user when the browser goes offline.
Toggling classes
Adding the class
modifier allows you to add a class to an element when "offline".
<div wire:offline.class="bg-red-300"></div>
Now, when the browser goes offline, the element will receive the bg-red-300
class. The class will be removed again once the user is back online.
You can also perform the inverse, and remove classes by adding the .remove
modifier, similar to how wire:loading
works.
<div wire:offline.class.remove="bg-green-300" class="bg-green-300"></div>
The bg-green-300
class will be removed from the <div>
while offline.
Toggling attributes
Adding the attr
modifier allows you to add an attribute to an element when "offline".
<button wire:offline.attr="disabled">Submit</button>
Now, when the browser goes offline, the button will be disabled.
You can also perform the inverse, and remove attributes by adding the .remove
modifier.