
Enter a search term above to see results...
Enter a search term above to see results...
Semantic UI templates provide a declarative syntax for generating the HTML structure of your Web Components. They integrate features like looping, conditionals, expressions, and access to a component’s data context to simplify rendering dynamic views.
Template syntax is designed to be adaptable to your team’s preferences and to help components feel more natural across codebases of different languages.
Bracket syntax supports either single or double bracket as long as it is consistent across the file.
Welcome, { getFirstName }
Welcome, {{ getFirstName }}
Expressions can use Lisp style spaced expressions or javascript style expressions. You can also include any inlined javascript.
{ formatDate date 'h:mm a' timezone }
{ formatDate(date, 'h:mm a') }
{ formatDate date, 'h:mm a' (getTimezone user) }
{ formatDate(date, 'h:mm a', getTimezone(user)) }
{ formatDate date, ('h:mm + 'a') (getTimezone user) }
{ formatDate(date, 'h:mm + 'a', getTimezone(user)) }
Semantic UI templates compile to an Abstract Syntax Tree (AST). This AST is used to efficiently render the component’s Shadow DOM and perform targeted updates only when underlying reactive data sources change.
See the Templates & Data Context guide for details on how templates integrate with component data.
Templates are bound to a data context which is used for evaluating expressions.
You can think of the data context as “all the variables defined in the scope of your template”.
When using the component framework these will come from sources in your component like their settings, and internal state.
Allow values to be output and functions executed from the template’s data context.
{name}
{someMethod argumentOne argumentTwo}
{formatDateTime someDate 'YYYY-MM-DD HH:mm' (object timezone='local')}
{formatDate (getDate now) 'h:mm a'}
{#html someHTML}
Control flow using #if
, #else if
, and #else
.
{#if isColor 'red'} Red{else if isColor 'blue'} Blue{else} Another color{/if}
Iterate over collections using #each
.
{#each row in someCollection} {row.name}{/each}
With inner data context
{#each someCollection} {name}{/each}
With array index
{#each someCollection} {index}{/each}
With else
{#each someCollection} {index}{else} No value{/each}
Define areas for external content injection.
Default Slot
{>slot}
Named Slot
{>slot icon}
Access built-in utility functions for common tasks like formatting or logic.
{stringify someObject}{formatDate someDate}{log 'Hello World'}
Compose components by rendering other component templates.
Named Templates
{> exampleSubtemplate}
Dynamic Template Support
{>template name=getTemplateName data={ afternoon: 'Biking', evening: getEveningActivity, }}
Reactive Data Controls
{>template name=getTemplateName reactiveData={ morning: morningActivity, } data={ afternoon: 'Biking', evening: eveningActivity, }}
Define and reuse inline template fragments within the same file.
{#snippet fullName} {#if both firstName lastName} {firstName} {lastName} {else} {lastName} {/if}{/snippet}
{#if isLoggedOut} Login, {>fullName}{else if hasName} Login, {>fullName}{else} Login{/if}