インターネット接続が失われた場合に、ユーザーへ通知することが重要になる場合があります。Livewireはユーザーの「オフライン」状態に基づいてアクションを実行する便利なユーティリティを提供しています。
要素のトグル
wire:offline属性を追加すれば、ユーザーが「オフライン」になったとき、ページに要素を表示できます。
<div wire:offline>
You are now offline.
</div>この
<div>はデフォルトで自動的に非表示になり、ブラウザがオフラインになるとユーザーに表示されます。
クラスのトグル
class修飾子を追加すると、「オフライン」時に要素へクラスを追加できます。
<div wire:offline.class="bg-red-300"></div>これで、ブラウザがオフラインになると、この要素へbg-red-300クラスが追加されます。ユーザーがオンラインに戻ると、クラスは再び削除されます。
wire:loadingの動作と同様に、逆の振る舞いを実行する、.remove修飾子を追加してクラスを削除できます。
<div wire:offline.class.remove="bg-green-300" class="bg-green-300"></div>big-green-300クラスは、オフライン時に<div>から削除されます。
属性のトグル
attr修飾子を追加すると、「オフライン」時に要素へ属性を追加できます。
<button wire:offline.attr="disabled">Submit</button>これでブラウザがオフラインになると、ボタンが無効になります。
逆の振る舞いを実行するため、.remove修飾子を追加して属性を削除できます。