オフラインステータス
リアルタイムアプリケーションでは、ユーザーのデバイスがインターネットに接続されていないことを視覚的に示すことが役立つ場合があります。In real-time applications, it can be helpful to provide a visual indication that the user's device is no longer connected to the internet.
Livewireは、このような場合に役立つwire:offlineディレクティブを提供します。Livewire provides the wire:offline directive for such cases.
Livewireコンポーネント内の要素にwire:offlineを追加すると、デフォルトで非表示になり、ユーザーが接続を失うと表示されるようになります。By adding wire:offline to an element inside a Livewire component, it will be hidden by default and become visible when the user loses connection:
<div wire:offline>
このデバイスは現在オフラインです。
</div>
クラスの切り替えToggling classes
class修飾子を追加すると、ユーザーが接続を失ったときに要素にクラスを追加できます。ユーザーがオンラインに戻ると、クラスは再び削除されます。Adding the class modifier allows you to add a class to an element when the user loses their connection. The class will be removed again, once the user is back online:
<div wire:offline.class="bg-red-300">
または、.remove修飾子を使用すると、ユーザーが接続を失ったときにクラスを削除できます。この例では、ユーザーが接続を失っている間、<div>からbg-green-300クラスが削除されます。Or, using the .remove modifier, you can remove a class when a user loses their connection. In this example, the bg-green-300 class will be removed from the <div> while the user has lost their connection:
<div class="bg-green-300" wire:offline.class.remove="bg-green-300">
属性の切り替えToggling attributes
.attr修飾子を使用すると、ユーザーが接続を失ったときに要素に属性を追加できます。この例では、ユーザーが接続を失っている間、「Save」ボタンは無効になります。The .attr modifier allows you to add an attribute to an element when the user loses their connection. In this example, the "Save" button will be disabled while the user has lost their connection:
<button wire:offline.attr="disabled">Save</button>