Директива wire:bind:class

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

Синтаксис

В значение директивы передаётся массив, где ключи - это названия классов, а значения - условия их применения:

<div wire:bind:class="{ 'class-name': condition }">
	Content
</div>

Также можно передать строку с именем свойства компонента, которое содержит классы:

<div wire:bind:class="$dynamicClass">
	Content
</div>

Пример

Давайте сделаем кнопку, которая будет менять свой цвет при клике. При активном состоянии кнопка будет иметь класс active:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Button extends Component
	{
		public $isActive = false;
		
		public function toggle()
		{
			$this->isActive = !$this->isActive;
		}
		
		public function render()
		{
			return view('livewire.button');
		}
	}
?>

<button
	wire:click="toggle"
	wire:bind:class="{ 'active': isActive }"
>
	Toggle me
</button>

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

<button class="active">
	Toggle me
</button>

Пример

Давайте используем несколько классов одновременно. Элемент будет иметь класс highlight при активном состоянии и класс error, если свойство $hasError равно true:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Form extends Component
	{
		public $isActive = true;
		public $hasError = false;
		
		public function toggleError()
		{
			$this->hasError = !$this->hasError;
		}
		
		public function render()
		{
			return view('livewire.form');
		}
	}
?>

<div
	wire:bind:class="{
		'highlight': isActive,
		'error': hasError
	}"
>
	Content with dynamic classes
</div>
<button wire:click="toggleError">
	Toggle error
</button>

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

<div class="highlight error">
	Content with dynamic classes
</div>
<button>
	Toggle error
</button>

Пример

Давайте применим динамический класс на основе значения свойства. В зависимости от числа будет выбираться соответствующий класс:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Status extends Component
	{
		public $status = 'info';
		
		public function setStatus($status)
		{
			$this->status = $status;
		}
		
		public function render()
		{
			return view('livewire.status');
		}
	}
?>

<div
	wire:bind:class="{
		'info': status === 'info',
		'success': status === 'success',
		'error': status === 'error'
	}"
>
	Status: {{ $status }}
</div>
<button wire:click="setStatus('success')">
	Set success
</button>
<button wire:click="setStatus('error')">
	Set error
</button>

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

<div class="success">
	Status: success
</div>
<button>
	Set success
</button>
<button>
	Set error
</button>

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

директиву wire:bind:style,
которая динамически управляет CSS-стилями
директиву wire:bind:disabled,
которая динамически блокирует элемент формы
директиву wire:bind:href,
которая динамически управляет атрибутом href
директиву wire:click,
которая вызывает метод компонента при клике