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