Skip to content

Commit fbe5162

Browse files
committed
style directive
1 parent c969979 commit fbe5162

File tree

1 file changed

+16
-1
lines changed

1 file changed

+16
-1
lines changed

blade.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -426,7 +426,7 @@ The `$loop` variable also contains a variety of other useful properties:
426426
| `$loop->parent` | When in a nested loop, the parent's loop variable. |
427427

428428
<a name="conditional-classes"></a>
429-
### Conditional Classes
429+
### Conditional Classes & Styles
430430

431431
The `@class` directive conditionally compiles a CSS class string. The directive accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:
432432

@@ -446,6 +446,21 @@ The `@class` directive conditionally compiles a CSS class string. The directive
446446
<span class="p-4 text-gray-500 bg-red"></span>
447447
```
448448

449+
Likewise, the `@style` directive may be used to conditionally add inline CSS styles to an HTML element:
450+
451+
```blade
452+
@php
453+
$isActive = true;
454+
@endphp
455+
456+
<span @style([
457+
'background-color: red',
458+
'font-weight: bold' => $isActive,
459+
])></span>
460+
461+
<span style="background-color: red; font-weight: bold;"></span>
462+
```
463+
449464
<a name="additional-attributes"></a>
450465
### Additional Attributes
451466

0 commit comments

Comments
 (0)