Directives #
Sugar provides familiar control structures and attribute helpers as HTML attributes.
Directives are just attributes prefixed with s:. They keep templates readable while compiling to fast PHP.
Directive Types #
| Type | What it does | Examples |
|---|---|---|
| Control Flow | Wraps elements in conditions or loops. | s:if, s:foreach, s:cache, s:switch, s:try |
| Attribute | Computes or merges attributes. | s:class, s:spread, s:tag |
| Content | Replaces element content with output. | s:text, s:html |
| Pass-through | Handled by other passes. | s:slot, s:bind, s:raw, s:trim |
<div s:if="$isReady">Ready</div>
<div s:class="['active' => $isActive]"></div>
<div s:text="$userName"></div>
<s-card s:bind="$cardProps">
<div s:slot="header">Title</div>
</s-card>
<div s:raw>
{{ this-is-left-untouched }}
<s-template s:if="$nope">Not parsed</s-template>
</div>
<!-- $isReady = true, $isActive = true, $userName = 'Alice' -->
<div>Ready</div>
<div class="active"></div>
<div>Alice</div>
<s-card>
<div s:slot="header">Title</div>
</s-card>
<div>
{{ this-is-left-untouched }}
<s-template s:if="$nope">Not parsed</s-template>
</div>
Jump to the full pages
Special Elements #
-
<s-template>- Fragment element that renders only children and carries directives without adding HTML.
Use it as a wrapper when you need directives or scoping without introducing a real DOM node. It is also used for template inheritance and includes.
<s-template s:if="$show">
<h2>Only this output renders</h2>
</s-template>
For related examples, see: - Template Inheritance - Control Flow Directives