empty.ftl
1 <#-- Macro: empty
2
3 Description: Generates an empty state message with an optional icon, image, title, subtitle, and action button.
4
5 Parameters:
6 - title (string, optional): the main title of the empty state message.
7 - subtitle (string, optional): the subtitle of the empty state message.
8 - iconName (string, optional): the name of the icon to use, using the Themify Icon font (e.g. "mood-empty", "heart", "star", etc.).
9 - img (string, optional): the URL of the image to display.
10 - actionTitle (string, optional): the title of the action button.
11 - actionBtn (string, optional): the color of the action button, using a Bootstrap color class (e.g. "primary", "secondary", "success", "info", "warning", "danger", "light", or "dark").
12 - actionIcon (string, optional): the name of the icon to use for the action button, using the Themify Icon font.
13 - actionUrl (string, optional): the URL to link to when the action button is clicked.
14 -->
15 <#macro empty title='' subtitle='' id='' class='' iconName='mood-empty' iconClass='' img='' imgClass='' actionTitle='' actionBtn='primary' actionIcon='plus' actionClass='' actionUrl='#'>
16 <div class="empty<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if>>
17 <#if img=''>
18 <div class="empty-icon<#if iconClass!=''> ${iconClass}</#if>"><@icon prefix='ti ti-' style='${iconName}' params='style="font-size:48px"' /></div>
19 <#else>
20 <div class="empty-img<#if imgClass!=''> ${imgClass}</#if>"><img src="${img}" height="128" alt=""></div>
21 </#if>
22 <p class="empty-title"><#if title=''>#i18n{portal.util.message.emptyTitle} <#else>${title}</#if></p>
23 <#if subtitle !=''>
24 <p class="empty-subtitle text-muted">${subtitle}</p>
25 <#else>
26 <p class="empty-subtitle text-muted">#i18n{portal.util.message.emptySubTitle}</p>
27 </#if>
28 <#if actionTitle !=''>
29 <div class="empty-action<#if actionClass!=''> ${actionClass}</#if>">
30 <a href="${actionUrl}" class="btn btn-${actionBtn}"><#if actionIcon !=''><@icon prefix='ti ti-' style='${actionIcon}' /></#if> ${actionTitle}</a>
31 </div>
32 </#if>
33 </div>
34 </#macro>