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

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

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

Синтаксис

<div wire:offline>
	Content for offline state
</div>

Пример

Давайте покажем сообщение о потере соединения с помощью директивы wire:offline:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class StatusComponent extends Component
	{
		public function render()
		{
			return view('livewire.status-component');
		}
	}
?>

<div>
	<div wire:online>
		✅ You are online
	</div>
	
	<div wire:offline>
		⚠️ No internet connection
	</div>
</div>

Результат выполнения кода (при наличии интернета):

✅ You are online

Результат выполнения кода (при потере соединения):

⚠️ No internet connection

Пример

Давайте покажем форму только при наличии соединения, а при его отсутствии - сообщение об ошибке:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class FormComponent extends Component
	{
		public $name = '';
		
		public function submit()
		{
			// Process form submission
		}
		
		public function render()
		{
			return view('livewire.form-component');
		}
	}
?>

<div>
	<div wire:online>
		<input type="text" wire:model="name" placeholder="Enter name">
		<button wire:click="submit">Submit</button>
	</div>
	
	<div wire:offline>
		<p style="color: red;">
			Connection lost. Please check your internet.
		</p>
	</div>
</div>

Результат выполнения кода (при наличии интернета):

<input type="text" placeholder="Enter name">
<button>Submit</button>

Результат выполнения кода (при потере соединения):

<p style="color: red;">
	Connection lost. Please check your internet.
</p>

Смотрите также

директиву wire:online,
которая отображает элементы при наличии интернет-соединения
директиву wire:loading,
которая показывает элементы в процессе загрузки
директиву wire:dirty,
которая отслеживает изменения данных в компоненте
директиву wire:show,
которая условно отображает элементы на основе выражений