Write a block of HTML and let users decide if they want one instance, five, or 500.
Basic Example
<div class="items">
{ repeater(id: '##{{ component_id_1 }}') }
<div class="item">
<sf-text id=":2"></sf-text>
</div>
{ repeater_end() }
</div>
Repeaters use opening and closing functions to define repeatable sections. Repeaters share the same ID namespace as content tags, using the notation ##{{ component_id_1 }} (equivalent to :1), which affects child element numbering.
CSS Example
.items {
display: flex;
align-items: center;
justify-content: center;
}
.item {
width: 25%;
}
Change Repeater Button Position
Snowfire automatically appends repeater button HTML. For custom placement, add:
<div class="sf-repeater-buttons"></div>
> Note: Wrap both the repeater and buttons in a container with position: relative.
Full Example
<div class="items-wrapper" style="position: relative;">
<div class="items">
{ repeater(id: '##{{ component_id_1 }}') }
<div class="item">
<sf-text id=":2"></sf-text>
</div>
{ repeater_end() }
</div>
<div class="sf-repeater-buttons"></div>
</div>