Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Taking your approach on designing things actually makes it fun, more natural, and overall easier.

— Dominik, Developer

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 →