Hello everyone,
In one of my tab implementation i am using data-sly-template to generate a consistent markup.
So, I want data-sly-template to persist the markup inside the data-sly-call, after the template is processed.
The representational code is given below:
source.html
<sly data-sly-use.tabTpl="templates/tab.html">
<!--/* SCENARIO 1 */-->
<sly data-sly-call="${ tabTpl.tabList @ ariaLabel='LIST_ARIA_LABEL' }">
<!--/* TABLIST_CONTENT */-->
<sly data-sly-call="${ tabTpl.tabButton @ title='TAB_NAME', isSelected='true', tabId='TAB_ID' }"></sly>
</sly>
<!--/* SCENARIO 2 */-->
<sly data-sly-call="${ tabTpl.tabPanel @ tabId='TAB_ID' }">
<!--/* TABPANEL_CONTENT */-->
<div>hello world markup</div>
</sly>
</sly>
<sly data-sly-use.tabTpl="templates/tab.html">
<!--/* SCENARIO 1 */-->
<sly data-sly-call="${ tabTpl.tabList @ ariaLabel='LIST_ARIA_LABEL' }">
<!--/* TABLIST_CONTENT */-->
<sly data-sly-call="${ tabTpl.tabButton @ title='TAB_NAME', isSelected='true', tabId='TAB_ID' }"></sly>
</sly>
<!--/* SCENARIO 2 */-->
<sly data-sly-call="${ tabTpl.tabPanel @ tabId='TAB_ID' }">
<!--/* TABPANEL_CONTENT */-->
<div>hello world markup</div>
</sly>
</sly>
templates/tab.html
<!--/*
Template to create tab button
*/-->
<sly data-sly-template.tabButton="${ @ title, isSelected, tabId }">
<button class="tab-button" role="tab" aria-selected="${ isSelected == 'true' ? 'true' : false }" aria-controls="${ tabId }-tab" id="${ tabId }" tabindex="0">
${ title }
</button>
</sly>
<!--/*
Template to create tab button wrapper
NOTE: This is unsupported at the moment
*/-->
<sly data-sly-template.tabList="${ @ ariaLabel }">
<div class="tab-list" role="tablist" aria-label="${ ariaLabel }">
<!--/* EXPECTED_TABLIST_CONTENT_FROM_SOURCE */-->
${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->
</div>
</sly>
<!--/*
Template to create tab panel
NOTE: This is unsupported at the moment
*/-->
<sly data-sly-template.tabPanel="${ @ tabId }">
<div class="tab-panel" role="tabpanel" id="${ tabId }-tab" aria-labelledby="${ tabId }">
<!--/* EXPECTED_TABPANEL_CONTENT_FROM_SOURCE */-->
${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->
</div>
</sly>
<!--/*
Template to create tab button
*/-->
<sly data-sly-template.tabButton="${ @ title, isSelected, tabId }">
<button class="tab-button" role="tab" aria-selected="${ isSelected == 'true' ? 'true' : false }" aria-controls="${ tabId }-tab" id="${ tabId }" tabindex="0">
${ title }
</button>
</sly>
<!--/*
Template to create tab button wrapper
NOTE: This is unsupported at the moment
*/-->
<sly data-sly-template.tabList="${ @ ariaLabel }">
<div class="tab-list" role="tablist" aria-label="${ ariaLabel }">
<!--/* EXPECTED_TABLIST_CONTENT_FROM_SOURCE */-->
${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->
</div>
</sly>
<!--/*
Template to create tab panel
NOTE: This is unsupported at the moment
*/-->
<sly data-sly-template.tabPanel="${ @ tabId }">
<div class="tab-panel" role="tabpanel" id="${ tabId }-tab" aria-labelledby="${ tabId }">
<!--/* EXPECTED_TABPANEL_CONTENT_FROM_SOURCE */-->
${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->
</div>
</sly>
Is there any way to achieve the CONTENT inside template (tabList/tabPanel) ?
Really appreciate any kind of possible solutions to this.
Thanks & Regards,
Shri.