Директива wire:offline

В приложениях реального времени может быть полезно предоставить визуальный сигнал того, что устройство пользователя больше не подключено к интернету.

Например, если вы создали платформу для ведения блогов на Livewire, вы можете захотеть уведомить ваших пользователей о том, что они находятся в автономном режиме, чтобы они не создавали целый пост в блоге без возможности сохранения в базе данных со стороны Livewire.

Livewire предоставляет директиву wire:offline для таких случаев. Добавив wire:offline к элементу внутри компонента Livewire, он будет скрыт по умолчанию и станет видимым, когда пользователь потеряет соединение:

<div wire:offline>
    Устройство в данный момент не подключено к сети.
</div>

Элемент исчезнет снова, когда сетевое соединение будет восстановлено.

Переключение классов

Добавление модификатора class позволяет добавить класс к элементу, когда пользователь теряет соединение. Класс будет удалён снова, когда пользователь вернётся в онлайн-режим:

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

Или, используя модификатор .remove, вы можете удалить класс, когда пользователь теряет соединение. В этом примере класс bg-green-300 будет удалён из <div>, пока пользователь потерял соединение:

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

Переключение атрибутов

Модификатор .attr позволяет добавить атрибут к элементу, когда пользователь теряет соединение. В этом примере кнопка «Сохранить» будет отключена, пока пользователь потерял соединение:

<button wire:offline.attr="disabled">Сохранить</button>

Справочник

wire:offline

Модификаторы

Модификатор	Описание
.class="имя-класса"	Добавить CSS-класс в автономном режиме
.class.remove="имя-класса"	Удалить CSS-класс в автономном режиме
.attr="атрибут"	Добавить HTML-атрибут в автономном режиме