cAccordion.ftl
1 <#-- Macro: cAccordion
2
3 Description: affiche une liste de titres empilés verticalement. Lorsqu’un titre est cliqué (ou activé par une interaction au clavier ou un lecteur d’écran), il révèle ou masque le contenu associé.
4
5 Parameters:
6 @param - id - string - required - l'ID de l'accordion
7 @param - title - string - required - le titre de l'accordion
8 @param - btnTitle - string - optional - (NEW) le titre du bouton de l'accordion
9 @param - class - string - optional - permet d'ajouter une classe CSS à l'accordion
10 @param - titleLevel - string - optional - définit le niveau de titre de l'accordion
11 @param - titleClass - string - optional - l'ajout de classe CSS au titre de l'accordion
12 @param - subTitle - string - optional - sous titre de l'accordion
13 @param - subTitleClass - string - optional - nom de classe pour le sous titre de l'accordion.
14 @param - btnClass - string - optional - nom de classe pour l'icon du bouton "collapse"
15 @param - btnShowLabel - string - optional - (NEW) gérer le texte du parametre "data-show-label" de l'accordion (par défaut: '#i18n{theme.labelShowDetail}')
16 @param - btnHideLabel - string - optional - (NEW) gérer le texte du parametre "data-hide-label" de l'accordion (par défaut: '#i18n{theme.labelHideDetail}')
17 @param - header - string - optional - contenu HTML ajouté au niveau du titre de l'accordion
18 @param - border - boolean - optional - si true une bordure est ajoutée (par défaut: false)
19 @param - state - boolean - optional - si true l'accordéon est déplié par défaut (par défaut: true)
20 @param - hasCollapse - boolean - optional - si true affiche l'icône pour le collapse (par défaut: true)
21 @param - params - string - optional - permet d'ajouter des parametres HTML à l'accordion
22 -->
23 <#macro cAccordion id title btnTitle='' class='' titleClass='' titleLevel=3 subTitle='' subTitleClass='' btnClass='' btnShowLabel='#i18n{theme.labelShowDetail}' btnHideLabel='#i18n{theme.labelHideDetail}' header='' border=false state=true hasCollapse=true params='' deprecated...>
24 <@deprecatedWarning args=deprecated />
25 <#local iconType><#if class?contains('danger')>danger<#elseif class?contains('warning')>warning<#elseif class?contains('success')>success<#else>info</#if></#local>
26 <#local accordionRole><#if class?contains('danger')>alert<#elseif class?contains('warning')>alert<#elseif class?contains('success')>status<#else>status</#if></#local>
27 <div class="accordion" id="acc${id!}" <#if class?contains('outline')>role="${accordionRole}"</#if> >
28 <div class="card ${class!}<#if border> with-border</#if><#if subTitle !=''> with-subtitle</#if>" ${params!}>
29 <#local cardTitleClass>card-header m-0<#if !state> collapsed</#if></#local>
30 <#local titleParams>data-bs-toggle="collapse" data-bs-target="#collapseAcc${id}" <#if hasCollapse>aria-expanded="<#if state>true<#else>false</#if></#if>" aria-controls="collapseAcc${id}"</#local>
31 <@cTitle level=titleLevel class=cardTitleClass params=titleParams>
32 <button class="btn btn-link btn-block btn-header-accordion w-100<#if iconType != 'info'> main-${iconType}-color-text</#if>" type="button" data-bs-toggle="collapse" data-show-label="${btnShowLabel}" data-hide-label="${btnHideLabel}" data-bs-target="#collapseAcc${id}" aria-expanded="<#if state>true<#else>false</#if>" aria-controls="collapseAcc${id}" aria-labelledby="headingAcc${id}">
33 <span class="d-flex<#if !class?contains('outline') && header =''> flex-column<#else> align-items-center</#if> flex-1">
34 <#if class?contains('outline')>
35 <span class="card-header-prepend">
36 <@parisIcon name='alert-${iconType}' />
37 </span>
38 <span<#if titleClass !=''>class="d-block ${titleClass}"</#if> id="headingAcc${id}">${title}</span>
39 <#if header !=''>${header}</#if>
40 <#if subTitle !=''><span class="card-subtitle w-100<#if subTitleClass !=''> ${subTitleClass}</#if>">${subTitle}</span></#if>
41 <#if hasCollapse><span class="card-header-separator"></span></#if>
42 <#else>
43 <span class="card-title d-block<#if titleClass !=''> ${titleClass}</#if>" id="headingAcc${id}">${title}</span>
44 <#if header !=''>${header}</#if>
45 <#if subTitle !=''><span class="card-subtitle w-100<#if subTitleClass !=''> ${subTitleClass}</#if>">${subTitle}</span></#if>
46 </#if>
47 </span>
48 <#if hasCollapse>
49 <span class="accordion-toggle ms-auto">
50 <#if btnTitle !=''><span class="btn-label-accordion d-none d-md-inline-block<#if iconType != 'info'> main-${iconType}-color-text</#if>">${btnTitle}</span></#if>
51 <span class="btn-accordion<#if btnClass !=''> ${btnClass}</#if>">
52 <#local btnClass>${btnClass}<#if iconType != 'info'> main-${iconType}-color-text</#if></#local>
53 <@parisIcon name='arrow-bottom' class=btnClass title='' />
54 </span>
55 </span>
56 </#if>
57 </button>
58 </@cTitle>
59 <#if hasCollapse>
60 <div id="collapseAcc${id}" class="m-0 collapse <#if state>show</#if>" role="region" aria-labelledby="headingAcc${id}" data-parent="#acc${id!}">
61 <div class="card-body"<#if iconType != 'info'> style="border-color:var(--main-${iconType}-color-text)"</#if>>
62 <#nested>
63 </div>
64 </div>
65 <div class="card-footer d-block d-sm-none text-center<#if class?contains('alert')> bg-transparent</#if>">
66 <button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAcc${id}" aria-expanded="<#if state>true<#else>false</#if>" aria-controls="collapseAcc${id}">
67 <svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
68 <use xlink:href="#paris-icon-arrow-bottom"></use>
69 </svg>
70 </button>
71 </div>
72 </#if>
73 </div>
74 </div>
75 </#macro>