Code sample - wrapComponent macro

Hi,

 

I thought it would be useful to share this simple macro. It can be used to ensure that all your custom components are using Lithum panels and wrapping  HTML / CSS classes that fit well into the design and properties of the skin.

 

This is not by all means an official Lithium component, but you are welcome to try it and experiment with your custom widgets. Do you use similar macros in your code?

 

 

<#macro wrapComponent name="" title="">
<div class="lia-panel lia-panel-standard lia-component-${name}">
  <div class="lia-decoration-border">
      <div class="lia-decoration-border-top">
        <div></div>
      </div>
  <div class="lia-decoration-border-content">
    <div>
      <#if title?? && title?has_content>
        <div class="lia-panel-heading-bar-wrapper">
         <div class="lia-panel-heading-bar"><span class="lia-panel-heading-bar-title">${title}</span></div>
        </div>
      </#if>
    <div class="lia-panel-content-wrapper">
      <div class="lia-panel-content">
        <div id="${name}" class="${name}">
          <#nested />
        </div>
      </div>
    </div>
  </div>
</div>
    <div class="lia-decoration-border-bottom">
      <div></div>
    </div>
  </div>
</div>
</#macro> 

 

 

Usage:

Assuming you defined the above code in a common-functions Macro in Studio Endpoints, you can then do the following in your custom components:

 

 

<#import "common-functions.ftl" as commonFnc/>

<@commonFnc.wrapComponent name="myCustomComponent">
   <#-- Include your custom component code here -->
</@commonFnc.wrapComponent>

 

Hope it helps!