Partial Tag

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 }}

We recommend prefixing any views intended to be only used as partials with an underscore, _like-this.antlers.html. You don’t need to include the underscore in your partial tag.

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>

Related Reading

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

Parameters