Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Bought Jack McDade's course on design. Going through it now...and it is SO well done!

— Justin Jackson, Transistor.fm

attribute Modifier

When you're writing partials, you might find yourself passing variables that will ultimately just be used in HTML attributes, like this:

<input
type="text"
{{ if name }}name="{{ name }}"{{ /if }}
{{ if class }}class="{{ class }}"{{ /if }}
{{ if mandatory }}required{{ /if }}
/>

You can simplify this using the attribute modifier:

name: first_name
class: text-sm font-mono text-gray-900
mandatory: true
<input
type="text"
{{ name | attribute:name }}
{{ class | attribute:class }}
{{ mandatory | attribute:required }}
/>
<input
type="text"
name="first_name"
class="text-sm font-mono text-gray-900"
required
/>

The attribute modifier supports passing booleans, some objects, arrays, integers, floats and strings.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →