Template Properties

Template properties enable you to define custom markup for specific parts of components using the <property name="templateName"> syntax.

App Components

Component	Template	Description
App	`logoTemplate`	Optional template for the app logo
AppHeader	`logoTemplate`	Template for the header logo
AppHeader	`profileMenuTemplate`	Template for the profile menu area
AppHeader	`titleTemplate`	Template for the header title
NavPanel	`logoTemplate`	Template for the navigation panel logo (in vertical layouts)

Form Components

Component	Template	Description
Form	`buttonRowTemplate`	Template for the form's button row/actions area
FormItem	`inputTemplate`	Template for custom form input components
Checkbox	`inputTemplate`	Template for custom checkbox input display

Data Display Components

Component	Template	Description
List	`itemTemplate`	Template for individual list items
List	`groupHeaderTemplate`	Template for group headers in grouped lists
List	`groupFooterTemplate`	Template for group footers in grouped lists
List	`emptyListTemplate`	Template displayed when list is empty
Items	`itemTemplate`	Template for displaying each data item
Table	`noDataTemplate`	Template displayed when table has no data
BarChart	`tooltipTemplate`	Template for custom tooltip content
LineChart	`tooltipTemplate`	Template for custom tooltip content

Selection Components

Component	Template	Description
Select	`optionTemplate`	Template for dropdown option display
Select	`optionLabelTemplate`	Template for option labels
Select	`valueTemplate`	Template for selected value display
Select	`emptyListTemplate`	Template displayed when no options available
AutoComplete	`optionTemplate`	Template for autocomplete option display
AutoComplete	`emptyListTemplate`	Template displayed when no suggestions available
Option	`optionTemplate`	Template for custom option content

Interactive Components

Component	Template	Description
DropdownMenu	`triggerTemplate`	Template for the dropdown trigger element
SubMenuItem	`triggerTemplate`	Template for submenu trigger appearance
Tabs	`tabTemplate`	Template for the clickable tab area

Layout Components

Component	Template	Description
Splitter	`splitterTemplate`	Template for the splitter handle/divider
Backdrop	`overlayTemplate`	Template for optional overlay content

Utility Components

Component	Template	Description
Queue	`progressFeedback`	Template for progress reporting UI
Queue	`resultFeedback`	Template for result summary when queue completes

Usage Patterns

Basic

<List data="{items}">
  <property name="itemTemplate">
    <Text>{$item.name}</Text>
  </property>
</List>

Multiple

<List data="{groupedItems}">
  <property name="groupHeaderTemplate">
    <H3>{$item.group}</H3>
  </property>
  <property name="itemTemplate">
    <Text>{$item.name}</Text>
  </property>
  <property name="emptyListTemplate">
    <Text color="muted">No items found</Text>
  </property>
</List>

Alternative children syntax

Some components allow using children as templates instead of explicit template properties:

<!-- Using template property -->
<List data="{items}">
  <property name="itemTemplate">
    <Text>{$item}</Text>
  </property>
</List>

<!-- Using children as template -->
<List data="{items}">
  <Text>{$item}</Text>
</List>