Директива wire:loading.class

Директива wire:loading.class вешается на HTML-элемент и управляет CSS-классами этого элемента в момент, когда компонент Livewire выполняет запрос к серверу. В значение передаётся имя класса, который нужно добавить. По умолчанию класс добавляется во время загрузки и удаляется после её завершения. Если нужно наоборот, используется модификатор .remove.

Синтаксис

<div wire:loading.class="class-name">
	...
</div>

<div wire:loading.class.remove="class-name">
	...
</div>

Пример

Давайте добавим класс opacity-50 кнопке во время загрузки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserManager extends Component
	{
		public $users = [];
		
		public function loadUsers()
		{
			sleep(2);
			
			$this->users = ['John', 'Jane', 'Bob'];
		}
		
		public function render()
		{
			return view('livewire.user-manager');
		}
	}
?>

<div>
	<button
		wire:click="loadUsers"
		wire:loading.class="opacity-50"
	>
		Load Users
	</button>
	
	<ul>
		@foreach ($users as $user)
			<li>{{ $user }}</li>
		@endforeach
	</ul>
</div>

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

<button class="opacity-50">
	Load Users
</button>
<ul>
	<li>John</li>
	<li>Jane</li>
	<li>Bob</li>
</ul>

Пример

Теперь давайте удалим класс active с элемента во время загрузки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class StatusToggler extends Component
	{
		public $isActive = true;
		
		public function toggle()
		{
			sleep(1);
			
			$this->isActive = !$this->isActive;
		}
		
		public function render()
		{
			return view('livewire.status-toggler');
		}
	}
?>

<div>
	<div
		wire:click="toggle"
		wire:loading.class.remove="active"
		class="box active"
	>
		{{ $isActive ? 'Active' : 'Inactive' }}
	</div>
</div>

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

<div class="box">
	Active
</div>

Пример

Скомбинируем добавление и удаление классов с помощью нескольких директив wire:loading.class на одном элементе:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataFetcher extends Component
	{
		public $data = [];
		
		public function fetchData()
		{
			sleep(3);
			
			$this->data = ['item1', 'item2', 'item3'];
		}
		
		public function render()
		{
			return view('livewire.data-fetcher');
		}
	}
?>

<div>
	<button
		wire:click="fetchData"
		wire:loading.class="bg-gray-200"
		wire:loading.class.remove="bg-blue-500 text-white"
		class="bg-blue-500 text-white px-4 py-2 rounded"
	>
		Fetch Data
	</button>
	
	<ul>
		@foreach ($data as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<button class="bg-gray-200 px-4 py-2 rounded">
	Fetch Data
</button>
<ul>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>

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

директиву wire:loading,
которая управляет отображением элементов во время загрузки
директиву wire:loading.delay,
которая добавляет задержку перед показом состояния загрузки
директиву wire:loading.attr,
которая управляет атрибутами элемента во время загрузки
директиву wire:dirty.class,
которая управляет классами при изменении полей формы