Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

This course is the most refreshing take on teaching design that I've come across.

— Mikaël Sévigny, 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 →