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.

Welcome, { getFirstName }

Welcome, {{ getFirstName }}

Expressions

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

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}