Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

For a software dev like me who has no idea how to create a cute hand-drawn dashed line, this course just 100% works.

— Ira Zayats, Developer

Partial Tag

Partials are reusable views that may find themselves in any number of other layouts, templates, and other partials.

Overview

You can use any view as a partial by using this here partial tag.

// This will import /resources/views/blog/_card.antlers.html
{{ partial:blog/card }}
Best Practice

We recommend prefixing any views intended to be only used as partials with an underscore, _like-this.antlers.html and reference them `{{ partial:like-this }}. The underscore is not necessary in the partial tag definition.

Passing Data

You can pass additional data into a partial via on-the-fly parameters. The parameter name will become a variable inside the partial. The only reserved parameter is src, so you can name your variables just about anything.

{{ partial:list header="favorite ice cream flavors" :items="flavors" }}
 
// Inside `list.antlers.html`
<h2>These are my {{ header }}</h2>
{{ items | ul }}
<h2>These are my favorite ice cream flavors</h2>
<ul>
<li>Chocolate Chip Cookie Dough</li>
<li>Mint Chocolate Chip</li>
<li>Neon Mind Melter</li>
</ul>

Note that the :items parameter is prefixed by a colon, meaning it will pass the value of a flavors variable, if it exists.

Slots

Sometimes you might need to pass a large chunk of content into a partial. Jamming a bunch of HTML through a parameter would be like trying to shove a pizza through a donut. A hilarious YouTube video but a bad idea on a Friday night.

The solution is to use the partial tag as a pair. Everything inside will be passed into the partial in the {{ slot }} variable.

// Your main view
{{ partial:modal title="Confirmation" }}
<div class="flex items-center">
<img src="/img/warning.svg" />
<p>Are you sure you want to delete your entire collection of WWE wrestling figures?</p>
</div>
{{ /partial:modal }}
 
// _modal.antlers.html
<div class="bg-white rounded shadow">
<h2 class="p-2 border-b">{{ title }}</h2>
{{ slot }}
<button @click="confirm" class="button">Do it</button>
</div>
<div class="bg-white rounded shadow">
<h2 class="p-2 border-b">Confirmation</h2>
<div class="flex items-center">
<img src="/img/warning.svg" />
<p>Are you sure you want to delete your entire collection of WWE wrestling figures?</p>
</div>
<button @click="confirm" class="button">Do it</button>
</div>

Conditional Rendering

You can render a partial only if a condition is met.

{{ partial:components/subtitle :when="subtitle" }}
{{ subtitle }}
{{ /partial:components/subtitle }}

Also supports the converse using :unless.

If you haven't read up on views yet, you should. It's considered fundamental knowledge, like knowing that seals are just dog mermaids. 🐕 🧜‍♀️

You may also be interested in the partial:exists or partial:if_exists tags.

Parameters

src

string

You can pass the name of the partial with a parameter instead of tag argument. Example: src="cards/author_bio" or :src="var_name".

when

string

Render a partial only if a condition is met.

unless

string

The converse of when.

*

mixed

Any parameter you create will be passed through to the partial as a variable.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →