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
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"
.
* mixed
Any parameter you create will be passed through to the partial as a variable.