You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.6 KiB
Plaintext
78 lines
1.6 KiB
Plaintext
<#macro tabsBar panelId activedId='' filled=false pill=false>
|
|
<div
|
|
class="pf-v5-c-tabs pf-c-tabsbar<#if filled> pf-m-fill</#if><#if pill> pf-c-tabs-pills</#if>"
|
|
role="region"
|
|
<#if panelId??>data-tab-panel="${panelId}"</#if>
|
|
data-active-tab="${activedId!''}"
|
|
>
|
|
<button
|
|
class="pf-v5-c-tabs__scroll-button"
|
|
type="button"
|
|
disabled
|
|
aria-hidden="true"
|
|
aria-label="Scroll left"
|
|
>
|
|
<i class="fas fa-angle-left" aria-hidden="true">
|
|
</i>
|
|
</button>
|
|
<ul class="pf-v5-c-tabs__list" role="tablist">
|
|
<#nested>
|
|
</ul>
|
|
<button
|
|
class="pf-v5-c-tabs__scroll-button"
|
|
type="button"
|
|
disabled
|
|
aria-hidden="true"
|
|
aria-label="Scroll right"
|
|
>
|
|
<i class="fas fa-angle-right" aria-hidden="true">
|
|
</i>
|
|
</button>
|
|
</div>
|
|
</#macro>
|
|
|
|
<#macro tabButton tabId label panelId="" active=false disabled=false>
|
|
<li class="pf-v5-c-tabs__item<#if active> pf-m-current</#if>" role="presentation">
|
|
<a
|
|
class="pf-v5-c-tabs__link"
|
|
<#if tabId??>
|
|
href="#${tabId}"
|
|
data-tab-target="${tabId}"
|
|
</#if>
|
|
<#if panelId??>
|
|
aria-controls="${panelId}"
|
|
</#if>
|
|
role="tab"
|
|
aria-selected="<#if active>true<#else>false</#if>"
|
|
<#if disabled>
|
|
aria-disabled="true"
|
|
disabled
|
|
</#if>
|
|
>
|
|
${kcSanitize(msg(label))?no_esc}
|
|
</a>
|
|
</li>
|
|
</#macro>
|
|
|
|
<#macro tabPanel panelId>
|
|
<div
|
|
class="pf-v5-c-tab-panel"
|
|
id="${panelId}"
|
|
>
|
|
<#nested>
|
|
</div>
|
|
</#macro>
|
|
|
|
<#macro tabContent tabId active=false>
|
|
<div
|
|
data-tab-id="${tabId}"
|
|
role="tabpanel"
|
|
class="pf-v5-c-tab-content"
|
|
<#if !active>
|
|
hidden
|
|
</#if>
|
|
>
|
|
<#nested>
|
|
</div>
|
|
</#macro>
|