Offline State

You might want to notify a user if their internet connection is lost.

WireDrupal provides helpful utilities to perform actions based on a user's "offline" state.

Toggling elements

To show an element when the internet connection is lost (offline), use wire:offline attribute.

<div wire:offline>

  You are offline.

</div>

With above, the element will be hidden by default, and shown to the user when the browser goes offline.

Toggling classes

Adding the class modifier allows adding a class to an element when "offline".

<div wire:offline.class="offline"></div>

With above, when the browser goes offline, the element will receive the offline class. The class will be removed again once the user is back online.

To remove classes, use the .remove modifier.

<div wire:offline.class.remove="offline" class="offline"></div>

With above, the offline class will be removed while offline.

Toggling attributes

With the attr modifier, it is possible to add an attribute to an element when "offline".

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

With above, when the browser goes offline, the disabled="true" attribute will be added to the button.

You can also perform the inverse, and remove attributes by adding the .remove modifier.