Директива style
Директива style применяется в Blade-шаблонах для добавления CSS-стилей к HTML-элементам на основе условий. Первым параметром передаётся массив стилей, где ключом является CSS-свойство, а значением - условие, определяющее, будет ли применён данный стиль. Если условие возвращает true, то стиль добавляется к элементу.
Синтаксис
<div {{ style('background-color: red', $isActive) }}>
Content
</div>
Пример
Давайте добавим стиль для активного элемента:
@php
$isActive = true;
@endphp
<div {{ style('color: green; font-weight: bold', $isActive) }}>
Active user
</div>
Результат выполнения кода:
<div style="color: green; font-weight: bold;">
Active user
</div>
Пример
Давайте добавим стиль с использованием нескольких свойств:
@php
$user = [
'name' => 'John',
'is_admin' => true
];
@endphp
<div {{ style([
'background-color: blue' => $user['is_admin'],
'color: white' => $user['is_admin'],
'font-size: 20px' => true
]) }}>
{{ $user['name'] }}
</div>
Результат выполнения кода:
<div style="background-color: blue; color: white; font-size: 20px;">
John
</div>
Пример
Давайте используем условное добавление стилей с динамическими значениями:
@php
$product = [
'name' => 'Laptop',
'price' => 1500,
'discount' => 15
];
@endphp
<div {{ style([
'background-color: yellow' => $product['discount'] > 10,
'color: red' => $product['discount'] > 10
]) }}>
{{ $product['name'] }} - {{ $product['price'] }} $
</div>
Результат выполнения кода:
<div style="background-color: yellow; color: red;">
Laptop - 1500 $
</div>
