Attribute Directives #

Attribute directives compute or adjust attributes while keeping templates readable. They can be combined with control flow directives.

Merge rules #

s:class merges with an existing static class attribute into one final class output.
s:spread / s:attr exclude attribute names already defined explicitly on the element.
Explicit attributes win over spread-provided values for the same attribute name.

Build classes from an associative array of conditions.

When an element already has a static class attribute, s:class merges into that same class output instead of creating a duplicate attribute.

<div s:class="['active' => $isActive, 'disabled' => $isDisabled]"></div>

<div class="card" s:class="['featured' => $isFeatured]"></div>

<!-- $isActive = true, $isDisabled = false, $isFeatured = true -->
<div class="active"></div>
<div class="card featured"></div>

Spread an array of attributes onto the element. s:attr is a short alias.

Explicitly defined attributes on the element are excluded from spread input, including merged attributes like class.

<div s:spread="$attrs"></div>
<div s:attr="$attrs"></div>

<!-- $attrs = ['id' => 'user-1', 'class' => 'card', 'disabled' => true] -->
<div id="user-1" class="card" disabled></div>

<button class="btn" s:spread="$extraAttrs">Save</button>

<!-- $extraAttrs = ['type' => 'submit', 'disabled' => true] -->
<button class="btn" type="submit" disabled>Save</button>

<button id="save" class="btn" s:class="['primary' => true]" s:spread="$extraAttrs">Save</button>

<!-- $extraAttrs = ['id' => 'override', 'class' => 'x', 'disabled' => true] -->
<button id="save" class="btn primary" disabled>Save</button>

Apply the checked attribute when the expression is truthy.

<input type="checkbox" s:checked="$newsletter">

<!-- $newsletter = true -->
<input type="checkbox" checked>

Apply the selected attribute when the expression is truthy.

<option s:selected="$value === $selected"><?= $label ?></option>

<!-- $value = 'gold', $selected = 'gold', $label = 'Gold' -->
<option selected>Gold</option>

Apply the disabled attribute when the expression is truthy.

<button s:disabled="$isSaving">Save</button>

<!-- $isSaving = true -->
<button disabled>Save</button>

Compute the element tag name at runtime.

<div s:tag="$headingLevel">Page Title</div>

<div s:tag="$wrapperTag" class="panel">Content</div>

<!-- $headingLevel = 'h2', $wrapperTag = 'section' -->
<h2>Page Title</h2>
<section class="panel">Content</section>