Templating Using template features in Semantic UI Guide

Templating

Overview

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.

Writing Templates

Flexible Syntax

Template syntax is designed to be adaptable to your team’s preferences and to help components feel more natural across codebases of different languages.

Brackets

Bracket syntax supports either single or double bracket as long as it is consistent across the file.

Single Bracket
Welcome, { getFirstName }
Double Bracket
Welcome, {{ getFirstName }}

Expressions

Expressions can use Lisp style spaced expressions or javascript style expressions. You can also include any inlined javascript.

Lisp Simple
{ formatDate date 'h:mm a' timezone }
Javascript
{ formatDate(date, 'h:mm a') }
Lisp Nested
{ formatDate date, 'h:mm a' (getTimezone user) }
Javascript Nested
{ formatDate(date, 'h:mm a', getTimezone(user)) }
Lisp Evaluated
{ formatDate date, ('h:mm + 'a') (getTimezone user) }
Javascript Evaluated
{ formatDate(date, 'h:mm + 'a', getTimezone(user)) }

Compiles to AST

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.

Binding 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.

Template Features

Expressions

Allow values to be output and functions executed from the template’s data context.

Value Output

{name}

Function Calls

{someMethod argumentOne argumentTwo}

Complex Nested Expressions

{formatDateTime someDate 'YYYY-MM-DD HH:mm' (object timezone='local')}

Nested expressions

{formatDate (getDate now) 'h:mm a'}

HTML Output

{#html someHTML}

Conditionals

Control flow using #if, #else if, and #else.

{#if isColor 'red'}
Red
{else if isColor 'blue'}
Blue
{else}
Another color
{/if}

Loops

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}

Slots

Define areas for external content injection.

Default Slot

{>slot}

Named Slot

{>slot icon}

Global Helpers

Access built-in utility functions for common tasks like formatting or logic.

{stringify someObject}
{formatDate someDate}
{log 'Hello World'}

Subtemplates

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,
}
}

Snippets

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}
Previous
Workarounds
Next
Expressions