Директива class
Директива class в Blade позволяет динамически добавлять или удалять CSS-классы у элементов в зависимости от условий. Она принимает массив, где ключами являются имена классов, а значениями - условия, при которых эти классы должны быть применены. Если значение истинно, класс добавляется, если ложно - не добавляется.
Синтаксис
<div @class([
'class-1' => $condition1,
'class-2' => $condition2,
'class-3' => $condition3,
])>
Content
</div>
Пример
Давайте добавим класс 'active' элементу, если переменная $isActive равна true:
@php
$isActive = true;
@endphp
<div @class([
'active' => $isActive,
'inactive' => !$isActive,
])>
This is a dynamic class example
</div>
Результат выполнения кода:
<div class="active">
This is a dynamic class example
</div>
Пример
Давайте добавим несколько классов в зависимости от статуса пользователя:
@php
$userStatus = 'admin';
$isLoggedIn = true;
@endphp
<div @class([
'user-card' => true,
'admin-card' => $userStatus === 'admin',
'guest-card' => $userStatus === 'guest',
'logged-in' => $isLoggedIn,
'animated' => $userStatus === 'admin' && $isLoggedIn,
])>
User information
</div>
Результат выполнения кода:
<div class="user-card admin-card logged-in animated">
User information
</div>
Пример
Давайте используем директиву class в цикле для выделения чётных элементов списка:
@php
$items = ['a', 'b', 'c', 'd', 'e'];
@endphp
<ul>
@foreach ($items as $index => $item)
<li @class([
'even-item' => $index % 2 === 0,
'odd-item' => $index % 2 !== 0,
])>
{{ $item }}
</li>
@endforeach
</ul>
Результат выполнения кода:
<ul>
<li class="even-item">a</li>
<li class="odd-item">b</li>
<li class="even-item">c</li>
<li class="odd-item">d</li>
<li class="even-item">e</li>
</ul>
Пример
Давайте комбинируем директиву class с атрибутами из переменных для создания гибкого компонента:
@php
$buttonType = 'primary';
$isDisabled = false;
$isLarge = true;
@endphp
<button @class([
'btn' => true,
'btn-primary' => $buttonType === 'primary',
'btn-secondary' => $buttonType === 'secondary',
'btn-danger' => $buttonType === 'danger',
'btn-disabled' => $isDisabled,
'btn-large' => $isLarge,
]) @disabled($isDisabled)>
Click me
</button>
Результат выполнения кода:
<button class="btn btn-primary btn-large">
Click me
</button>
