Components: slots and declared parameters

A tag of your own with a .pad template is a component: the caller's content goes where the template writes @content@. Named slots give it more than one place for content, and {parms} says which parameters it takes. The card below is _tags/card.pad:

{parms title, tone='plain'}
<div class="card {#tone}" style="border: 1px solid #999; padding: 6px; margin: 4px">
  <b>{#title}</b>
  {slot 'header'}<i>no header given</i>{/slot}
  <div>@content@</div>
  {slot 'footer'}<small>@content@</small>{/slot}
</div>

{card title='Monthly revenue'}
  <strong>12.500</strong>
  {slot 'footer'}<a href="?reports">View report</a>{/slot}
{/card}

{card title='Visitors', tone='warn'}
  {slot 'header'}<i>last 30 days</i>{/slot}
  <strong>1.204</strong>
{/card}

Slots

• A {slot 'footer'}...{/slot} pair standing directly in the content of the tag is a fill: it is taken out of the content and goes where the template has its {slot 'footer'}. The rest of the content goes to @content@.
• In the template, the content of a {slot} is its default, rendered when the caller gave no fill. {slot 'header'/} in the caller's content is an empty fill.
• A default holding @content@ is a frame: {slot 'footer'}<small>@content@</small>{/slot} renders the frame round the fill, and nothing - or its @else@ part - when there is no fill.
• A fill is the caller's text: it renders with the caller's variables, and a {#name} or a {slot} inside it belongs to the caller's tag - which is how a template passes a slot of its own on to a tag it uses.

Every use has its own

The fills belong to one use of the tag, so a card inside a card keeps its own footer:

{card title='Outer'}
  {slot 'footer'}outer footer{/slot}
  {card title='Inner'}
    inner body
    {slot 'footer'}inner footer{/slot}
  {/card}
{/card}

Declared parameters

• {parms title, tone='plain'} at the top of the template declares the parameters: a name alone is required, name=default fills in what the caller left out. Both read as {#title}.
• A required parameter left out is an error, and so - under the strict check - is a parameter the tag does not declare: {card title='x', titel='y'} is reported by name.

Components written in the template

A component used on one page only needs no file of its own. {define 'name'}...{/define} writes it in the template: from there on {name} renders the body as _tags/name.pad would - {parms}, {#name}, @content@ and slots work alike.

{define 'pill'}
  {parms label, tone='info'}
  <span class="pill {#tone}">{#label}@content@</span>
{/define}

{pill label='New'}
{pill label='Sold out', tone='warn'}: 0 left{/pill}

A {macro} is called the way a function is: its parameters are declared on it - a name alone required, name=default filling in - given in their order or by name, and read as fields, {$label}.

{macro 'entry', label, type='text', value=''}
  <p><label>{$label} <input type="{$type}" name="{$label}" value="{$value}"></label></p>
{/macro}

{entry 'E-mail', 'email'}
{entry label='Name', value='Alice'}

• Both render at every use, in its place and with its fields; both can use themselves, for the rows below the current one.
• A define or macro exists from the point it is walked, as a {content} store does: a use before it is an unknown tag.
• A macro given too many values, missing a required one, or given a name it does not declare is an error.