Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
Exemple
Contenu de l'accordéon
Contenu de l'accordéon
Contenu de l'accordéon type "Info"
Contenu de l'accordéon type "Info"
Contenu de l'accordéon type "Déplié"
Contenu de l'accordéon type "Info"
Contenu de l'accordéon type "Info"
Contenu de l'accordéon type "Info"
Contenu de l'accordéon type "Info"
Contenu de l'accordéon
<@cAccordion id='acc1' title='Titre de l\'accordéon' subTitle='...et son sous-titre'>
Contenu de l'accordéon
</@cAccordion>
<@cAccordion id='acc2' title='accordéon avec titleClass et header...' class='primary' titleClass='main-info-color' header='<p class="ms-auto text-danger fw-bold">Header</p>'>
Contenu de l'accordéon
</@cAccordion>
<@cAccordion id='acc3' title='accordéon avec bouton action' subTitle='Sous titre' subTitleClass='text-muted' btnClass='btn-secondary'>
Contenu de l'accordéon type "Info"
</@cAccordion>
<@cAccordion id='acc31' title='accordéon avec outline' class='outline' >
Contenu de l'accordéon type "Info"
</@cAccordion>
<@cAccordion id='accCollapse' title='accordéon collapse' class='unfold' >
Contenu de l'accordéon type "Déplié"
</@cAccordion>
<@cAccordion id='acc32' title='accordéon avec alert primary outline' class='alert alert-outline alert-primary' state=false>
Contenu de l'accordéon type "Info"
</@cAccordion>
<@cAccordion id='acc33' title='accordéon avec alert primary outline' class='alert alert-outline alert-warning' btnTitle='Voir le détail'>
Contenu de l'accordéon type "Info"
</@cAccordion>
<@cAccordion id='acc34' title='accordéon avec alert primary outline' class='alert alert-outline alert-success' btnTitle='Voir le détail'>
Contenu de l'accordéon type "Info"
</@cAccordion>
<@cAccordion id='acc35' title='accordéon avec alert primary outline' class='alert alert-outline alert-danger' btnTitle='Voir le détail'>
Contenu de l'accordéon type "Info"
</@cAccordion>
<@cAccordion id='acc6' title='Exemple avec bordure' subTitle='...et son sous-titre' border=true state=false>
Contenu de l'accordéon
</@cAccordion>
<div class="accordion " id="accacc1" >
<div class="card with-subtitle" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1" aria-labelledby="headingAccacc1">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc1">Titre de l'accordéon</span>
<span class="card-subtitle w-100">...et son sous-titre</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc1" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc1" data-parent="#accacc1">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc2" >
<div class="card primary" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc2" aria-expanded="true" aria-controls="collapseAccacc2">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc2" aria-expanded="true" aria-controls="collapseAccacc2" aria-labelledby="headingAccacc2">
<span class="d-flex align-items-center flex-1">
<span class="card-title d-block main-info-color" id="headingAccacc2">accordéon avec titleClass et header...</span>
<p class="ms-auto text-danger fw-bold">Header</p>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc2" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc2" data-parent="#accacc2">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc2" aria-expanded="true" aria-controls="collapseAccacc2">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc3" >
<div class="card with-subtitle" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc3" aria-expanded="true" aria-controls="collapseAccacc3">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc3" aria-expanded="true" aria-controls="collapseAccacc3" aria-labelledby="headingAccacc3">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc3">accordéon avec bouton action</span>
<span class="card-subtitle w-100 text-muted">Sous titre</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion btn-secondary">
<svg class="paris-icon paris-icon-arrow-bottom btn-secondary"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc3" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc3" data-parent="#accacc3">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc3" aria-expanded="true" aria-controls="collapseAccacc3">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc31" role="status" >
<div class="card outline" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc31" aria-expanded="true" aria-controls="collapseAccacc31">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc31" aria-expanded="true" aria-controls="collapseAccacc31" aria-labelledby="headingAccacc31">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-info"data-mce-svg="paris-icon paris-icon-alert-info" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-info"></use>
</svg> </span>
<span id="headingAccacc31">accordéon avec outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc31" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc31" data-parent="#accacc31">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc31" aria-expanded="true" aria-controls="collapseAccacc31">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accaccCollapse" >
<div class="card unfold" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccaccCollapse" aria-expanded="true" aria-controls="collapseAccaccCollapse">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccaccCollapse" aria-expanded="true" aria-controls="collapseAccaccCollapse" aria-labelledby="headingAccaccCollapse">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccaccCollapse">accordéon collapse</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccaccCollapse" class="m-0 collapse show" role="region" aria-labelledby="headingAccaccCollapse" data-parent="#accaccCollapse">
<div class="card-body">
Contenu de l'accordéon type "Déplié"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccaccCollapse" aria-expanded="true" aria-controls="collapseAccaccCollapse">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc32" role="status" >
<div class="card alert alert-outline alert-primary" >
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccacc32" aria-expanded="false" aria-controls="collapseAccacc32">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc32" aria-expanded="false" aria-controls="collapseAccacc32" aria-labelledby="headingAccacc32">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-info"data-mce-svg="paris-icon paris-icon-alert-info" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-info"></use>
</svg> </span>
<span id="headingAccacc32">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc32" class="m-0 collapse " role="region" aria-labelledby="headingAccacc32" data-parent="#accacc32">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc32" aria-expanded="false" aria-controls="collapseAccacc32">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc33" role="alert" >
<div class="card alert alert-outline alert-warning" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc33" aria-expanded="true" aria-controls="collapseAccacc33">
<button class="btn btn-link btn-block btn-header-accordion w-100 main-warning-color-text" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc33" aria-expanded="true" aria-controls="collapseAccacc33" aria-labelledby="headingAccacc33">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-warning"></use>
</svg> </span>
<span id="headingAccacc33">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-label-accordion d-none d-md-inline-block main-warning-color-text">Show details</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-warning-color-text"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc33" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc33" data-parent="#accacc33">
<div class="card-body" style="border-color:var(--main-warning-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc33" aria-expanded="true" aria-controls="collapseAccacc33">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc34" role="status" >
<div class="card alert alert-outline alert-success" >
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccacc34" aria-expanded="false" aria-controls="collapseAccacc34">
<button class="btn btn-link btn-block btn-header-accordion w-100 main-success-color-text" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc34" aria-expanded="false" aria-controls="collapseAccacc34" aria-labelledby="headingAccacc34">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-success"data-mce-svg="paris-icon paris-icon-alert-success" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-success"></use>
</svg> </span>
<span id="headingAccacc34">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-label-accordion d-none d-md-inline-block main-success-color-text">Hide details</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-success-color-text"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc34" class="m-0 collapse " role="region" aria-labelledby="headingAccacc34" data-parent="#accacc34">
<div class="card-body" style="border-color:var(--main-success-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc34" aria-expanded="false" aria-controls="collapseAccacc34">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc35" role="alert" >
<div class="card alert alert-outline alert-danger" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc35" aria-expanded="true" aria-controls="collapseAccacc35">
<button class="btn btn-link btn-block btn-header-accordion w-100 main-danger-color-text" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc35" aria-expanded="true" aria-controls="collapseAccacc35" aria-labelledby="headingAccacc35">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-danger"></use>
</svg> </span>
<span id="headingAccacc35">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-label-accordion d-none d-md-inline-block main-danger-color-text">Quid</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-danger-color-text"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc35" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc35" data-parent="#accacc35">
<div class="card-body" style="border-color:var(--main-danger-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc35" aria-expanded="true" aria-controls="collapseAccacc35">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc6" >
<div class="card with-border with-subtitle" >
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccacc6" aria-expanded="false" aria-controls="collapseAccacc6">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc6" aria-expanded="false" aria-controls="collapseAccacc6" aria-labelledby="headingAccacc6">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc6">Exemple avec bordure</span>
<span class="card-subtitle w-100">...et son sous-titre</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc6" class="m-0 collapse " role="region" aria-labelledby="headingAccacc6" data-parent="#accacc6">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc6" aria-expanded="false" aria-controls="collapseAccacc6">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
required- l'ID de l'accordion
-
title (string)
required- le titre de l'accordion
-
btnTitle (string)
optionnalnew - le titre du bouton de l'accordion
-
class (string)
optionnal- l'ajout de classe CSS à l'accordion
-
titleLevel (string)
optionnal- définit le niveau de titre de l'accordion
-
titleClass (string)
optionnal- l'ajout de classe CSS au titre de l'accordion
-
subTitle (string)
optionnal- sous titre de l'accordion
-
subTitleClass (string)
optionnal- nom de classe pour le sous titre de l'accordion
-
btnClass (string)
optionnal- nom de classe pour l'icon du bouton "collapse"
-
btnShowLabel (string)
optionnalnew - gérer le texte du parametre "data-show-label" de l'accordion (par défaut: 'Show details')
-
btnHideLabel (string)
optionnalnew - gérer le texte du parametre "data-hide-label" de l'accordion (par défaut: 'Hide details')
-
header (string)
optionnal- contenu HTML ajouté au niveau du titre de l'accordion
-
border (boolean)
optionnal- si true une bordure est ajoutée (par défaut: false)
-
state (boolean)
optionnal- si true l'accordéon est déplié par défaut (par défaut: true)
-
hasCollapse (boolean)
optionnal- si true affiche l'icône pour le collapse (par défaut: true)
-
collapseHeader (boolean)
optionnal- En responsive affiche ou masque le header de l'accordéon (par défaut: true) si false masque le header
-
collapseFooter (boolean)
optionnal- En responsive affiche ou masque le footer de l'accordéon (par défaut: true) si false masque le footer
-
params (string)
optionnal- permet d'ajouter des parametres HTML à l'accordéon
Exemple
Titre de l'alerte
Message erreur
Message d'erreur
Contenu de l'erreur
Message d'erreur
Message d'erreur et bouton de fermeture
Message attention...
Message attention...
Contenu du message "warning"
Message validation...
Confirmation...
Message validation...
Confirmation...
<@cAlert title='Titre de l\'alerte' />
<@cAlert class='danger' title='Message erreur' />
<@cAlert class='danger' title='Message d\'erreur'>Contenu de l'erreur</@cAlert>
<@cAlert class='danger' dismissible=true title='Message d\'erreur'>Message d'erreur et bouton de fermeture</@cAlert>
<@cAlert class='warning' title='Message attention...' />
<@cAlert class='warning' dismissible=true title='Message attention...'>Contenu du message "warning"</@cAlert>
<@cAlert class='success' title='Message validation...'>Confirmation...</@cAlert>
<@cAlert class='success' dismissible=true title='Message validation...'>Confirmation...</@cAlert>
<div class="alert alert-outline alert-primary" role="status" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-info"data-mce-svg="paris-icon paris-icon-alert-info" aria-labelledby="paris-icon-alert-info-paris-title-146597326633481" focusable="false" role="img">
<title id="paris-icon-alert-info-paris-title-146597326633481">Information</title>
<use href="#paris-icon-alert-info"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Titre de l'alerte</p>
</div>
</div>
</div>
<div class="alert alert-outline alert-danger" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-152772265875151" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-152772265875151">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message erreur</p>
</div>
</div>
</div>
<div class="alert alert-outline alert-danger" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-158947205116821" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-158947205116821">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message d'erreur</p>
</div>
</div>
<div class="alert-content">
Contenu de l'erreur</div>
</div>
<div class="alert alert-outline alert-danger dismissible fade show" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-165122144358491" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-165122144358491">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message d'erreur</p>
</div>
<div class="alert-dismiss">
<button class="btn btn-close py-xs px-xs" type="button"data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<div class="alert-content">
Message d'erreur et bouton de fermeture</div>
</div>
<div class="alert alert-outline alert-warning" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-171297083600161" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-171297083600161">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message attention...</p>
</div>
</div>
</div>
<div class="alert alert-outline alert-warning dismissible fade show" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-177472022841831" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-177472022841831">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message attention...</p>
</div>
<div class="alert-dismiss">
<button class="btn btn-close py-xs px-xs" type="button"data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<div class="alert-content">
Contenu du message "warning"</div>
</div>
<div class="alert alert-outline alert-success" role="status" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-check"data-mce-svg="paris-icon paris-icon-alert-check" aria-labelledby="paris-icon-alert-check-paris-title-183646962083501" focusable="false" role="img">
<title id="paris-icon-alert-check-paris-title-183646962083501">Success</title>
<use href="#paris-icon-alert-check"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message validation...</p>
</div>
</div>
<div class="alert-content">
Confirmation...</div>
</div>
<div class="alert alert-outline alert-success dismissible fade show" role="status" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-check"data-mce-svg="paris-icon paris-icon-alert-check" aria-labelledby="paris-icon-alert-check-paris-title-189821901325171" focusable="false" role="img">
<title id="paris-icon-alert-check-paris-title-189821901325171">Success</title>
<use href="#paris-icon-alert-check"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message validation...</p>
</div>
<div class="alert-dismiss">
<button class="btn btn-close py-xs px-xs" type="button"data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<div class="alert-content">
Confirmation...</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID de l'alert
-
title (string)
optionnal- le titre de l'alert (par défaut : 'Warning')
-
class (string)
optionnal- permet d'ajouter une classe CSS prefixée 'alert-' à l'alert (par défaut : 'primary')
-
classText (string)
optionnal- permet d'ajouter une classe CSS au texte de l'alert
-
dismissible (boolean)
optionnal- permet d'activer la fermeture de l'alert (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML à l'alert
Exemple
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Item 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Item 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<#assign anchors = [
{"label":"Item 1", "href":"jsp/site/Portal.jsp?page_id=6#anchor-list-item-xxs"},
{"label":"Item 2", "href":"jsp/site/Portal.jsp?page_id=6#anchor-list-item-2"},
{"label":"Item 3", "href":"jsp/site/Portal.jsp?page_id=6#anchor-list-item-3"},
{"label":"Item 4", "href":"jsp/site/Portal.jsp?page_id=6#anchor-list-item-4"},
{"label":"Item 5", "href":"jsp/site/Portal.jsp?page_id=6#anchor-list-item-5"}
]>
<@cRow>
<@cCol cols="12 col-sm-3">
<@cAnchor anchors=anchors />
</@cCol>
<@cCol>
<@cTitle level=4 id="anchor-list-item-xxs" class="mt-0">Item 1</@cTitle>
<@cText class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cTitle level=4 id="anchor-list-item-2" class="mt-m">Item 2</@cTitle>
<@cText class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cTitle level=4 id="anchor-list-item-3" class="mt-m">Item 3</@cTitle>
<@cText class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cTitle level=4 id="anchor-list-item-4" class="mt-m">Item 4</@cTitle>
<@cText class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cTitle level=4 id="anchor-list-item-5" class="mt-m">Item 5</@cTitle>
<@cText class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCol>
</@cRow>
<div class="row ">
<div class="col-12 col-sm-3 ">
<div class="anchors ">
<ul >
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-xxs" >
<span class="link-label">Item 1</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-2" >
<span class="link-label">Item 2</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-3" >
<span class="link-label">Item 3</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-4" >
<span class="link-label">Item 4</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-5" >
<span class="link-label">Item 5</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col ">
<h4 class="mt-0" id="anchor-list-item-xxs">
Item 1</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="mt-m" id="anchor-list-item-2">
Item 2</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="mt-m" id="anchor-list-item-3">
Item 3</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="mt-m" id="anchor-list-item-4">
Item 4</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="mt-m" id="anchor-list-item-5">
Item 5</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID de la liste d'ancres
-
class (string)
optionnal- ajoute une classe CSS au container de la liste d'ancre
-
anchorsClass (string)
optionnal- ajoute une classe CSS aux ancres
-
anchors (object)
required- Objet list avec items d'ancres. L'objet contient un attribut 'href' et un attribut 'label'
-
params (string)
optionnal- permet d'ajouter des parametres HTML à l'ancre
Exemple
Badge example
Badge example
Badge example
<@cBadge label='Badge example' />
<@cBadge label='Badge example' dismissible=true />
<@cBadge label='Badge example' class='badge-secondary' />
<div class="badge ">
<p class="badge-label">Badge example</p>
</div>
<div class="badge dismissible">
<div class="badge-content">
<p class="badge-label">Badge example</p>
<button type="button" class="btn-close" onclick="this.parentElement.parentElement.remove();" aria-label="Close"></button>
</div>
</div>
<div class="badge badge-secondary">
<p class="badge-label">Badge example</p>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du badge
-
label (string)
optionnal- le titre du badge
-
class (string)
optionnal- permet d'ajouter une classe CSS au badge
-
hasp (boolean)
optionnal- permet de retirer le paragraphe qui entoure le label (par défaut: true)
-
dismissible (boolean)
optionnal- permet d'activer la fermeture du badge avec l'affichage d'une croix (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML au badge
Exemple
Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du bouton
-
label (string)
required- le titre du bouton
-
class (string)
optionnal- permet d'ajouter une classe CSS au bouton (valeur existantes dans le CSS: 'primary', 'secondary', 'tertiary', 'danger', 'expand')
-
noclass (boolean)
optionnal- permet de supprimer les classes CSS 'btn-' du bouton si pas de href (par défaut: false)
-
href (string)
optionnal- si valeur, permet de transformer le bouton en lien avec un attribut href
-
type (string)
optionnal- permet de modifier le type de bouton (par défaut: 'submit')
-
nestedPos (string)
optionnal- permet de gérer la position du contenu de la macro (par défaut: 'before', valeurs possibles: 'before', 'after')
-
disabled (boolean)
optionnal- permet de désactiver le bouton (par défaut: false)
-
size (string)
optionnal- permet de choisir la taille du bouton (choix possible: 'mini')
-
params (string)
optionnal- permet d'ajouter des parametres HTML au bouton
Bouton flottant
Pour créer un bouton flottant il faut inclure un bouton avec la simple classe ".btn" dans un block ayant la classe "btn-floating". Par défaut cette barre est positionnée en "absolute" et donc se place en fonction du dernier bloc parent en position "relative". Par défaut il est positionné à 56px du bas du blox et 16px du bord droit du bloc.
Pour modifier le positionnement 3 variables css existent que vous pouvez passer dans un attribut style soit en paramètre de la macro utilisée -paramètre "param"- ou à ajouter dans la balise html.
- --position-float-btn: avec les valeurs possibles : absolute,relative ou fixed pour changer le mode de positionnement
- --bottom-float-btn: avec n'importe quelle valeur en px,em,rem... pour changer le positionnement depuis le bas du bloc
- --right-float-btn: avec n'importe quelle valeur en px,em,rem...pour changer le positionnement depuis la droite du bloc
Exemple
Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du bouton
-
class (string)
optionnal- permet d'ajouter une classe CSS au bouton (par défaut: 'primary')
-
src (string)
required- permet de définir l'image dans le bouton
-
type (string)
optionnal- permet de modifier le type de bouton (par défaut: 'submit')
-
params (string)
optionnal- permet d'ajouter des parametres HTML au bouton
-
imgPos (string)
optionnal- permet de gérer la position de l'image (par défaut: 'before', valeurs possibles: 'before', 'after')
-
disabled (boolean)
optionnal- permet de désactiver le bouton (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML au bouton
Exemple
Example 1
Example 2
<@cTitle level=4>Example 1</@cTitle>
<#assign buttons1 = [
{"label":"A", "class":"primary"},
{"label":"B", "class":"secondary"},
{"label":"C", "class":"tertiary"}
]>
<@cBlock>
<@cBtnGroup label='Menu Accueil' buttonList=buttons1 />
</@cBlock>
<@cTitle level=4>Example 2</@cTitle>
<#assign buttons2 = [
{"label":"Off", "class":"danger"},
{"label":"On", "class":"success active"}
]>
<@cBlock>
<@cBtnGroup label='Menu Accueil' type='vertical' buttonList=buttons2 />
</@cBlock>
<h4>
Example 1</h4>
<div>
<div class="btn-group" role="group" aria-label="Menu Accueil">
<ul class="list-unstyled d-flex flex-wrap m-0" >
<li class="me-xs d-flex">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-tertiary" type="submit">
<span class="btn-label ">C</span>
</button>
</li>
</ul>
</div>
</div>
<h4>
Example 2</h4>
<div>
<div class="btn-group btn-group-vertical" role="group" aria-label="Menu Accueil">
<ul class="list-unstyled d-flex flex-column m-0" >
<li class="me-xs d-flex">
<button class="btn btn-danger w-100" type="submit">
<span class="btn-label ">Off</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-success active w-100" type="submit">
<span class="btn-label ">On</span>
</button>
</li>
</ul>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du groupe de bouton
-
label (string)
required- définit l'aria-label du groupe de bouton
-
buttonList (object)
optionnal- objet list avec items de bouton. L'objet doit contenir un attribut 'label', un attribut 'class' et un attribut optionnel 'disabled'. Si vide, le contenu est nested. Si utilisé, les boutons sont encadrés par une liste, ce qui les rend accessibles
-
class (string)
optionnal- permet d'ajouter une classe CSS au groupe de bouton
-
type (string)
optionnal- permet de modifier le type de groupe de bouton (valeur possible: 'vertical')
-
params (string)
optionnal- permet d'ajouter des parametres HTML au groupe de bouton
Exemple
Example 1
Example 2
<#assign buttons3 = [
{"label":"A", "class":"secondary"},
{"label":"B", "class":"secondary"},
{"label":"C", "class":"secondary"}
]>
<#assign buttons4 = [
{"label":"D", "class":"secondary", "disabled"="true"},
{"label":"E", "class":"secondary", "disabled"="true"},
{"label":"F", "class":"secondary", "disabled"="true"}
]>
<#assign buttons5 = [
{"label":"Réactif", "class":"primary"},
{"label":"Actif", "class":"primary active"}
]>
<#assign buttons6 = [
{"label":"Réactif", "class":"primary", "disabled":true},
{"label":"Actif", "class":"primary active", "disabled":true}
]>
<@cTitle level=4>Example 1</@cTitle>
<@cBtnToolbar label='Menu Accueil' class='d-flex justify-content-between'>
<@cBtnGroup label='Menu Accueil Droit' buttonList=buttons3 />
<@cBtnGroup label='Menu Accueil Droit' buttonList=buttons4 />
<@cBtnGroup label='Menu Accueil Gauche' buttonList=buttons5 />
<@cBtnGroup label='Menu Accueil Gauche' buttonList=buttons6 />
</@cBtnToolbar>
<@cTitle level=4>Example 2</@cTitle>
<@cBtnToolbar label='Menu Accueil' class='d-flex mt-m justify-content-around'>
<@cBtnGroup label='Menu Accueil Droit' type='vertical' buttonList=buttons3 />
<@cBtnGroup label='Menu Accueil Droit' type='vertical' buttonList=buttons4 />
<@cBtnGroup label='Menu Accueil Gauche' type='vertical' buttonList=buttons5 />
<@cBtnGroup label='Menu Accueil Gauche' type='vertical' buttonList=buttons6 />
</@cBtnToolbar>
<h4>
Example 1</h4>
<div class="btn-toolbar d-flex justify-content-between" role="toolbar" aria-label="Menu Accueil">
<div class="btn-group" role="group" aria-label="Menu Accueil Droit">
<ul class="list-unstyled d-flex flex-wrap m-0" >
<li class="me-xs d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">C</span>
</button>
</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Droit">
<ul class="list-unstyled d-flex flex-wrap m-0" >
<li class="me-xs d-flex">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">F</span>
</button>
</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Gauche">
<ul class="list-unstyled d-flex flex-wrap m-0" >
<li class="me-xs d-flex">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-primary active" type="submit">
<span class="btn-label ">Actif</span>
</button>
</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Gauche">
<ul class="list-unstyled d-flex flex-wrap m-0" >
<li class="me-xs d-flex">
<button class="btn btn-primary" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-primary active" type="submit" disabled>
<span class="btn-label ">Actif</span>
</button>
</li>
</ul>
</div>
</div>
<h4>
Example 2</h4>
<div class="btn-toolbar d-flex mt-m justify-content-around" role="toolbar" aria-label="Menu Accueil">
<div class="btn-group btn-group-vertical" role="group" aria-label="Menu Accueil Droit">
<ul class="list-unstyled d-flex flex-column m-0" >
<li class="me-xs d-flex">
<button class="btn btn-secondary w-100" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary w-100" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary w-100" type="submit">
<span class="btn-label ">C</span>
</button>
</li>
</ul>
</div>
<div class="btn-group btn-group-vertical" role="group" aria-label="Menu Accueil Droit">
<ul class="list-unstyled d-flex flex-column m-0" >
<li class="me-xs d-flex">
<button class="btn btn-secondary w-100" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary w-100" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary w-100" type="submit" disabled>
<span class="btn-label ">F</span>
</button>
</li>
</ul>
</div>
<div class="btn-group btn-group-vertical" role="group" aria-label="Menu Accueil Gauche">
<ul class="list-unstyled d-flex flex-column m-0" >
<li class="me-xs d-flex">
<button class="btn btn-primary w-100" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-primary active w-100" type="submit">
<span class="btn-label ">Actif</span>
</button>
</li>
</ul>
</div>
<div class="btn-group btn-group-vertical" role="group" aria-label="Menu Accueil Gauche">
<ul class="list-unstyled d-flex flex-column m-0" >
<li class="me-xs d-flex">
<button class="btn btn-primary w-100" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-primary active w-100" type="submit" disabled>
<span class="btn-label ">Actif</span>
</button>
</li>
</ul>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du groupe de bouton toolbar
-
label (string)
required- définit l'aria-label du groupe de bouton toolbar
-
class (string)
optionnal- permet d'ajouter une classe CSS au groupe de bouton toolbar
-
type (string)
optionnal- permet de modifier le type de groupe de bouton toolbar (valeur possible: 'vertical')
-
params (string)
optionnal- permet d'ajouter des parametres HTML au groupe de bouton toolbar
Exemple
Example A
Example B
Example C "button"
<@cTitle level=4>Example A</@cTitle>
<#assign dropdown = [
{"label":"Item A", "href":"#"},
{"label":"Item B", "href":"#"},
{"label":"Item C", "href":"#"}
]>
<@cBlock>
<@cDropdown label='Menu A' items=dropdown />
</@cBlock>
<@cTitle level=4>Example B</@cTitle>
#assign dropdown = [
{"label":"Item A", "action":"#", "active":"false"},
{"label":"Item B", "action":"#","active": "false"},
{"label":"Item C", "action":"#","active": "false"}
]>
<@cBlock>
<@cDropdown label='Menu A' items=dropdown />
</@cBlock>
<@cTitle level=4>Example B</@cTitle>
<@cBlock>
<@cDropdown label='Menu D' >
<@cDropdownItem label='Item D' action='#' />
<@cDropdownItem label='Item E' action='#' />
<@cDropdownItemDivider />
<@cDropdownItem label='Item F' action='#' />
</@cDropdown>
</@cBlock>
<h4>
Example A</h4>
<div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Menu A
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Item A</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true" href="#">Item B</a></li>
<li><a class="dropdown-item" href="#">Item C</a></li>
</ul>
</div>
</div>
<h4>
Example B</h4>
<div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Menu D
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="">
Item D
</a>
</li>
<li>
<a class="dropdown-item" href="">
Item E
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="">
Item F
</a>
</li>
</ul>
</div>
</div>
<h4>
Example C "button"</h4>
<div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Menu D
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Item A</button></li>
<li><button class="dropdown-item" type="button">Item B</button></li>
<li><button class="dropdown-item" type="submit">Item C</button></li>
<li><hr class="dropdown-divider"></li>
<li>
<button class="dropdown-item disabled" aria-disabled="true" type="submit">
Item F
</button>
</li>
</ul>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
label (string)
required- le titre du bouton
-
action (string)
optionnal- Url du lien pour l'item de menu pour le type 'link' sinon 'button' ou 'submit' pour le type 'button'
-
type (string)
optionnal- 'link' par défaut sinon 'button' (par défaut: 'link')
-
active (boolean)
optionnal- si true ajoute la classe "active" sur l'item (par défaut: false)
-
disabled (boolean)
optionnal- si true ajoute la classe "disabled" sur l'item (par défaut: false)
-
header (boolean)
optionnal- si true ajoute la classe "dropdown-header" sur l'item (par défaut: false)
-
nestedPos (string)
optionnal- permet de gérer la position du contenu "nested" avant ou après le label (par défaut: 'before', valeurs possibles: 'before', 'after')
-
id (string)
optionnal- l'ID du bouton
-
class (string)
optionnal- permet d'ajouter une classe CSS au bouton (valeur existantes dans le CSS: 'primary', 'secondary', 'tertiary', 'danger', 'expand')
-
params (string)
optionnal- permet d'ajouter des parametres HTML au bouton
@cModal
Exemple
Cliquer sur les boutons ci-dessous pour afficher les boîtes de dialogue.
<@cBtn label='Modal_01' class='primary m-xxs' params=' data-bs-toggle="modal" data-bs-target="#example1Modal"'/>
<@cModal title='Exemple de modal' dismissLabel='Fermer' id='example1' footer='<button class="btn btn-secondary m-xxs" type="submit"><span class="btn-label">Text example</span></button><button class="btn btn-primary m-xxs" type="submit"><span class="btn-label">Text example</span></button>'>
<@cText>Contenu de la modal</@cText>
</@cModal>
<@cBtn label='Modal_02' class='primary m-xxs' params=' data-bs-toggle="modal" data-bs-target="#example2Modal"'/>
<@cModal title='Exemple de modal' dismissLabel='Annuler' id='example2' footer='<button class="btn btn-danger m-xxs" type="submit"><span class="btn-label">Text example</span></button>'>
<@cText>Contenu de la modal</@cText>
</@cModal>
<@cBtn label='Modal 3' class='primary m-xxs' params=' data-bs-toggle="modal" data-bs-target="#example3Modal"'/>
<@cModal title='Exemple de modal' static=true scrollable=true dismissible=false dismissLabel='Annuler' id='example3' footer='<button class="btn btn-danger m-xxs" type="submit"><span class="btn-label">Text example</span></button>'>
<@cText>Contenu de la modal</@cText>
</@cModal>
<p class="text-cap">
Cliquer sur les boutons ci-dessous pour afficher les boîtes de dialogue.</p>
<button class="btn btn-primary m-xxs" type="submit" data-bs-toggle="modal" data-bs-target="#example1Modal">
<span class="btn-label ">Modal 1</span>
</button>
<button class="btn btn-primary m-xxs" type="submit" data-bs-toggle="modal" data-bs-target="#example2Modal">
<span class="btn-label ">Modal 2</span>
</button>
<button class="btn btn-primary m-xxs" type="submit" data-bs-toggle="modal" data-bs-target="#example3Modal">
<span class="btn-label ">Modal 3</span>
</button>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
required- l'ID de la modal
-
title (string)
required- permet de définir le titre du header de la modal
-
class (string)
optionnal- permet d'ajouter une classe CSS à la modal
-
size (string)
optionnal- permet d'ajouter une classe CSS pour gérer la taille de la modal (pas de valeur pré-définie)
-
static (boolean)
optionnal- permet d'ajouter un attribut HTML 'data-backdrop' (par défaut: false)
-
pos (string)
optionnal- permet de gérer la position de la modal (par défaut et seule valeur existante: 'centered')
-
role (string)
optionnal- permet de définir le role de la modal avec un attribut HTML
-
scrollable (boolean)
optionnal- permet d'ajouter une classe CSS 'modal-dialog-scrollable' (par défaut: false)
-
dismissible (boolean)
optionnal- permet d'activer la fermeture de la modal avec l'affichage de la croix et le bouton de fermeture (par défaut: true)
-
dismissLabel (string)
optionnal- permet de définir le label du bouton de fermerture de la modal (par défaut: 'Close')
-
levelTitle (number)
optionnal- permet de définir le niveau de titre de la modal (par défaut: 1 )
-
footer (string)
optionnal- permet de définir le HTML du footer de la modal (pour y ajouter des boutons de submit par exemple)
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la modal
Aide
Permet de créer une boite de dialogue avec 3 macros imbriquée -é minima 2-.
Exemple
Example 1
Le hasard
Fait bien
Mais pas que...
Les choses
Example 2
Le hasard
Fait bien
Mais pas que...
Les choses
Example 3
- 1
- 2
- 3
Le hasard
Fait bien
Mais pas que...
Les choses
Example 4
Le hasard
Fait bien
Mais pas que...
Les choses
<@cTitle level=4>Example 1</@cTitle>
<@cCarousel id='manege1' items='' labelPrev='' labelNext=''>
<@cCarouselItem img='images/alexander-kagan-t9Td0zfDTwI-unsplash.png' active=true title='Le hasard' />
<@cCarouselItem img='images/adrien-xplr-wAScP0OY-yM-unsplash.png' title='Fait bien' subtitle='Mais pas que...' />
<@cCarouselItem img='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Les choses' />
</@cCarousel>
<@cTitle level=4>Example 2</@cTitle>
<@cCarousel id='manege2' items='' controls=true labelPrev='' labelNext=''>
<@cCarouselItem img='images/paul-dufour-5XndD3FhH-w-unsplash.png' active=true title='Le hasard' />
<@cCarouselItem img='images/adrien-xplr-wAScP0OY-yM-unsplash.png' title='Fait bien' subtitle='Mais pas que...' />
<@cCarouselItem img='images/alexander-kagan-t9Td0zfDTwI-unsplash.png' title='Les choses' />
</@cCarousel>
<@cTitle level=4>Example 3</@cTitle>
<@cCarousel id='manege3' items='' controls=true pagination=true indicatorSize=3 labelPrev='' labelNext=''>
<@cCarouselItem img='images/adrien-xplr-wAScP0OY-yM-unsplash.png' active=true title='Le hasard' />
<@cCarouselItem img='images/alexander-kagan-t9Td0zfDTwI-unsplash.png' title='Fait bien' subtitle='Mais pas que...' />
<@cCarouselItem img='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Les choses' />
</@cCarousel>
<@cTitle level=4>Example 4</@cTitle>
<@cCarousel id='manege4' items='' slideControls=true labelPrev='' labelNext=''>
<@cCarouselItem img='images/adrien-xplr-wAScP0OY-yM-unsplash.png' active=true title='Le hasard' />
<@cCarouselItem img='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Fait bien' subtitle='Mais pas que...' />
<@cCarouselItem img='images/alexander-kagan-t9Td0zfDTwI-unsplash.png' title='Les choses' />
</@cCarousel>
<h4>
Example 1</h4>
<div id="manege1" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<div class="carousel-inner">
<div class="carousel-item active" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>
<h4>
Example 2</h4>
<div id="manege2" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<div class="carousel-inner">
<div class="carousel-item active" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#manege2" data-bs-slide="prev" aria-label="élément précédent">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-left"data-mce-svg="paris-icon paris-icon-arrow-left" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-left"></use>
</svg> <span class="visually-hidden"></span>
</span>
</button>
<button class="carousel-control-next" data-bs-target="#manege2" data-bs-slide="next" aria-label="élément suivant">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-right"data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-right"></use>
</svg> <span class="visually-hidden"></span>
</span>
</button>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>
<h4>
Example 3</h4>
<div id="manege3" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<ol class="carousel-indicators pagination">
<li class="page-item active" data-bs-target="#manege3" data-bs-slide-to="0" aria-label="Slide 0" aria-selected="false" aria-controls="carousel-item-0" tabindex="0"><span class="page-link">1</span></li>
<li class="page-item" data-bs-target="#manege3" data-bs-slide-to="1" aria-label="Slide 1" aria-selected="false" aria-controls="carousel-item-1" tabindex="0"><span class="page-link">2</span></li>
<li class="page-item" data-bs-target="#manege3" data-bs-slide-to="2" aria-label="Slide 2" aria-selected="false" aria-controls="carousel-item-2" tabindex="0"><span class="page-link">3</span></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#manege3" data-bs-slide="prev" aria-label="élément précédent">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-left"data-mce-svg="paris-icon paris-icon-arrow-left" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-left"></use>
</svg> <span class="visually-hidden"></span>
</span>
</button>
<button class="carousel-control-next" data-bs-target="#manege3" data-bs-slide="next" aria-label="élément suivant">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-right"data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-right"></use>
</svg> <span class="visually-hidden"></span>
</span>
</button>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>
<h4>
Example 4</h4>
<div id="carouselButtons-manege4" class="d-flex justify-content-center py-2">
<button id="playButton-manege4" type="button" class="btn btn-tertiary" size="mini" aria-label="Démarrer la lecture du carrousel">
<svg class="paris-icon paris-icon-play"data-mce-svg="paris-icon paris-icon-play" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-play"></use>
</svg> </button>
<button id="pauseButton-manege4" type="button" class="btn btn-tertiary" size="mini" aria-label="Mettre le carrousel en pause">
<svg class="paris-icon paris-icon-refresh"data-mce-svg="paris-icon paris-icon-refresh" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-refresh"></use>
</svg> </button>
<button id="stopButton-manege4" type="button" class="btn btn-tertiary" size="mini" aria-label="Arrêter le carrousel et revenir à la première diapositive">
<svg class="paris-icon paris-icon-close"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg> </button>
</div>
<div id="manege4" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<div class="carousel-inner">
<div class="carousel-item active" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
var carouselElement = document.getElementById('manege4');
var carousel = bootstrap.Carousel.getOrCreateInstance(carouselElement);
document.getElementById('playButton-manege4').addEventListener('click', function () {
carousel.cycle();
});
document.getElementById('pauseButton-manege4').addEventListener('click', function () {
carousel.pause();
});
document.getElementById('stopButton-manege4').addEventListener('click', function () {
carousel.pause();
carousel.to(0);
});
});
</script>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du carousel (par défaut: 'manege')
-
class (string)
optionnal- permet d'ajouter une classe CSS au carousel
-
items (string)
optionnal- définit la liste des images du carousel. Si vide le contenu "#nested" sera utilisé.
-
indicatorSize (number)
optionnal- Si supérieur à 1 affiche des puces égales au nombre d'image -il sera toujours égal au nombre d'image !- Si items n'est pas vide le calcul se fera sur la longueur de la séquence (par défaut: 1)
-
controls (boolean)
optionnal- permet d'afficher les boutons 'Previous' et 'Next' pour naviguer dans le carousel (par défaut: false)
-
slideControls (boolean)
optionnal- permet d'afficher les boutons 'pause', 'play' et 'stop' dans le carousel (par défaut: false)
-
pagination (boolean)
optionnal- permet d'afficher la pagination pour naviguer dans le carousel (par défaut: false)
-
label (string)
optionnal- permet de définir l'aria-label du carousel (par défaut: 'Carousel')
-
labelPrev (string)
optionnal- permet de définir le titre du bouton 'Previous'
-
labelNext (string)
optionnal- permet de définir le titre du bouton 'Next'
-
params (string)
optionnal- permet d'ajouter des parametres HTML au carousel
Les paramètres de cCarouselItem
-
id (string)
optionnal- l'ID de la slide du carousel (par défaut: 'manege')
-
class (string)
optionnal- permet d'ajouter une classe CSS à la slide du carousel
-
img (string)
required- permet de définir la source de l'image de la slide du carousel
-
active (boolean)
optionnal- permet de définir que la slide du carousel est celle active au chargement de la page (par défaut: false)
-
idx (number)
optionnal- permet de définir l'index de la slide du carousel utilisé par l'attribut 'id' et 'aria-label' (par défaut: 1)
-
max (number)
optionnal- permet de définir le nombre maximum de slides dans le carousel pour l'attribut 'aria-label' (par défaut: 1)
-
alt (string)
optionnal- permet de définir l'attribut 'alt' de l'image
-
title (string)
optionnal- permet de définir le titre de la slide du carousel
-
titleLevek (number)
optionnalpermet de définir le niveau de titre de la slide du carousel (par défaut: 3)
-
subtitle (string)
optionnal- permet de définir le sous-titre de la slide du carousel
-
params (string)
optionnal- permet d'ajouter des parametres HTML la slide du carousel
Exemple
nested 1
nested 2
Contenu
nested 3
Contenu
nested 4
Contenu
nested 1
contenu
Aménagements piétonniers végétalisés
Contenu
Passage piétonnier sous porche à conserver
Contenu
Plafonnement des hauteurs : 31m
Contenu
Secteur de dispositions particulières : Site Miollis
UG 3.1.3 Implantation des constructions en vis-à-vis sur un même terrain
UG.3.2.6 Gabarit-enveloppe* des constructions en vis-à-vis sur un même terrain*
<@cCascading id='cascad1' title='nested 1' state=true>
<@cCascading id='cascad2' title='nested 2'><@cText>Contenu</@cText></@cCascading>
<@cCascading id='cascad3' title='nested 3'><@cText>Contenu</@cText></@cCascading>
<@cCascading id='cascad4' title='nested 4'><@cText>Contenu</@cText></@cCascading>
</@cCascading>
<@cCascading id='cascadSolo1' title='nested 1'><@cText>contenu</@cText></@cCascading>
<@cCascading id='cascadFile1' class='cascading-files' title='Aménagements piétonniers végétalisés'><@cText>Contenu</@cText></@cCascading>
<@cCascading id='cascadFile2' class='cascading-files' title='Passage piétonnier sous porche à conserver'><@cText>Contenu</@cText></@cCascading>
<@cCascading id='cascadFile3' class='cascading-files' title='Plafonnement des hauteurs : 31m'><@cText>Contenu</@cText></@cCascading>
<@cCascading id='cascadFile4' class='cascading-files' title='Secteur de dispositions particulières : Site Miollis' state=true>
<@cText>UG 3.1.3 Implantation des constructions en vis-à-vis sur un même terrain</@cText>
<@cText>UG.3.2.6 Gabarit-enveloppe* des constructions en vis-à-vis sur un même terrain*</@cText>
</@cCascading>
<details id='cascad1' class="cascading " open aria-expanded="true" >
<summary><span class="cascading-label ">nested 1</span></summary>
<div class="cascading-content"> <details id='cascad2' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">nested 2</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascad3' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">nested 3</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascad4' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">nested 4</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
</div>
</details>
<details id='cascadSolo1' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">nested 1</span></summary>
<div class="cascading-content">
<p>
contenu</p>
</div>
</details>
<details id='cascadFile1' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Aménagements piétonniers végétalisés</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascadFile2' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Passage piétonnier sous porche à conserver</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascadFile3' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Plafonnement des hauteurs : 31m</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascadFile4' class="cascading cascading-files" open aria-expanded="true" >
<summary><span class="cascading-label ">Secteur de dispositions particulières : Site Miollis</span></summary>
<div class="cascading-content">
<p>
UG 3.1.3 Implantation des constructions en vis-à-vis sur un même terrain</p>
<p>
UG.3.2.6 Gabarit-enveloppe* des constructions en vis-à-vis sur un même terrain*</p>
</div>
</details>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
required- l'ID de la cascade
-
title (string)
required- permet de définir le titre de la cascade
-
class (string)
optionnal- permet d'ajouter une classe CSS à la cascade
-
state (boolean)
optionnal- permet de définir si la cascade est ouverte au chargement de la page (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la cascade
Exemple
Vertical
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Vertical Secondary
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Horizontal
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Horizontal Secondary
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cartes depliantes
-
Title example
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Title example
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<@cTitle level=4>Vertical</@cTitle>
<@chList class='list-unstyled'>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cText class='text-end'><@cBtn label='Text example' class='primary mt-m' /></@cText>
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' />
</@chItem>
<@chItem>
<@cCard title='Title example'>
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cText class='text-end'><@cBtn label='Text example' class='primary mt-m' /></@cText>
</@cCard>
</@chItem>
</@chList>
<@cTitle level=4>Vertical Secondary</@cTitle>
<@chList class='list-unstyled'>
<@chItem>
<@cCard class='secondary' title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cText class='text-end'><@cBtn label='Text example' class='primary mt-m' /></@cText>
</@cCard>
</@chItem>
<@chItem>
<@cCard class='secondary' title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCard>
</@chItem>
<@chItem>
<@cCard class='secondary' title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' />
</@chItem>
<@chItem>
<@cCard class='secondary' title='Title example'>
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cText class='text-end'><@cBtn label='Text example' class='primary mt-m' /></@cText>
</@cCard>
</@chItem>
</@chList>
<@cTitle level=4>Horizontal</@cTitle>
<@chList class='list-unstyled'>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' orientation='h'>
<@cBlock class='d-md-flex justify-content-between align-items-end text-end'>
<@cText class="card-text text-start me-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cBtn label='Text example' class='primary text-end' />
</@cBlock >
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' orientation='h'>
<@cBlock class='d-md-flex justify-content-between align-items-end text-end'>
<@cText class="card-text text-start me-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cBlock >
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' orientation='h'>
<@cBlock class='d-md-flex justify-content-between align-items-end text-end'>
<@cText class="card-text text-start me-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cBtn label='Text example' class='primary text-end' />
</@cBlock >
</@cCard>
</@chItem>
</@chList>
<@cTitle level=4>Horizontal Secondary</@cTitle>
<@chList class='list-unstyled'>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' orientation='h' class='secondary'>
<@cBlock class='d-md-flex justify-content-between align-items-end text-end'>
<@cText class="card-text text-start me-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cBtn label='Text example' class='primary text-end' />
</@cBlock>
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' orientation='h' class='secondary'>
<@cBlock class='d-md-flex justify-content-between align-items-end text-end'>
<@cText class="card-text text-start me-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cBlock >
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' orientation='h' class='secondary'>
<@cBlock class='d-md-flex justify-content-between align-items-end text-end'>
<@cText class="card-text text-start me-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cBtn label='Text example' class='primary text-end' />
</@cBlock >
</@cCard>
</@chItem>
</@chList>
<@cTitle level=4>Cartes depliantes</@cTitle>
<@chList class='list-unstyled'>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cCascading id='cascadSolo1' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo2' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo3' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo4' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo5' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo6' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo7' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo8' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cText class="mt-m"><@cBtn label='Text example' class='primary' /></@cText>
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' class='secondary' >
<@cCascading id='cascadSolo9' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo10' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo11' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo12' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo13' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo14' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo15' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cCascading id='cascadSolo16' title='Text example'>
<@cText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCascading>
<@cText class="mt-m"><@cBtn label='Text example' class='expand' /></@cText>
</@cCard>
</@chItem>
</@chList>
<h4>
Vertical</h4>
<ul class="list-unstyled" >
<li>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
<li>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</li>
<li>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
</div>
</div>
</li>
<li>
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
</ul>
<h4>
Vertical Secondary</h4>
<ul class="list-unstyled" >
<li>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
<li>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</li>
<li>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
</div>
</div>
</li>
<li>
<div class="card secondary">
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
</ul>
<h4>
Horizontal</h4>
<ul class="list-unstyled" >
<li>
<div class="card ">
<div class="row m-0">
<div class="col-12 col-md-4 p-0">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
</div>
<div class="col-12 col-md-8 p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-primary text-end" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card ">
<div class="row m-0">
<div class="col-12 col-md-4 p-0">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
</div>
<div class="col-12 col-md-8 p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card ">
<div class="row m-0">
<div class="col p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-primary text-end" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<h4>
Horizontal Secondary</h4>
<ul class="list-unstyled" >
<li>
<div class="card secondary">
<div class="row m-0">
<div class="col-12 col-md-4 p-0">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
</div>
<div class="col-12 col-md-8 p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-primary text-end" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card secondary">
<div class="row m-0">
<div class="col-12 col-md-4 p-0">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
</div>
<div class="col-12 col-md-8 p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card secondary">
<div class="row m-0">
<div class="col p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-primary text-end" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<h4>
Cartes depliantes</h4>
<ul class="list-unstyled" >
<li>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<details id='cascadSolo1' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo2' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo3' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo4' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo5' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo6' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo7' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo8' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<p class="mt-m">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
<li>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<details id='cascadSolo9' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo10' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo11' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo12' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo13' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo14' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo15' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo16' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<p class="mt-m">
<button class="btn btn-expand" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
</ul>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID de la carte
-
title (string)
optionnal- définit le titre de la carte
-
titleClass (string)
optionnal- permet d'ajouter une classe CSS au titre de la carte
-
titleLevel (string)
optionnal- défaut 3, permet de modifier le niveau du titre de la carte si besoin, pour respecter les normes accessibliité
-
titleUrl (string)
optionnal- permet d'ajouter un lien au titre de la carte
-
titleUrlTitle (string)
optionnal- permet d'ajouter un lien un attribut "title" au lien sur le titre de la carte
-
subtitle (string)
optionnal- permet d'ajouter un sous-titre à la carte
-
subtitleClass (string)
optionnal- permet d'ajouter une classe CSS au sous-titre à la carte
-
subtitleLevel (string)
optionnal- permet de modifier le niveau du sous titre de la carte si besoin, pour respecter les normes accessiblité ( par défaut 4 )
-
class (string)
optionnal- permet d'ajouter une classe CSS à la carte
-
img (string)
optionnal- permet de définir la source de l'image de la carte
-
imgType (string)
optionnal- permet de définir le type de l'image de la carte (valeur possible: 'svg')
-
imgTitle (string)
optionnal- permet d'ajouter une image devant le titre de la carte
-
imgClass (string)
optionnal- permet de définir la valeur de l'attribut alt de la carte
-
header (string)
optionnal- permet de définir un text au dessus de l'image de la carte
-
headerClass (string)
optionnal- permet d'ajouter une classe CSS au container du header de la carte
-
headerLabelClass (string)
optionnal- permet d'ajouter une classe CSS au texte du header de la carte
-
headerImg (string)
optionnal- permet d'ajouter une image au header de la carte
-
subHeader (string)
optionnal- permet d'ajouter un sous header à la carte
-
subHeaderClass (string)
optionnal- permet d'ajouter une classe CSS au sous header de la carte
-
footer (string)
optionnal- permet d'ajouter un footer à la carte
-
footerClass (string)
optionnal- permet d'ajouter une classe CSS au footer de la carte
-
orientation (string)
optionnal- permet de gérer l'orientation de la carte (valeur possible: 'v')
-
vcolsInit (number)
optionnal- Par défault égal à 12, taille par défaut pour l'écran le plus petit de l'image et du contenu de la carte (12 = toute la largeur). Si la valeur est 0, la taille de l'image et du contenu de la carte ne seront pas modifié selon la media query -taille de l'écran- mais conservera les même largeurs définies par le paramètre vcols.
-
vcols (object)
optionnal- permet de gérer le ration de largeur entre l'image et le texte dans une orientation horizontale (par défaut: [4,8])
-
hoverEffect (boolean)
optionnal- permet d'ajouter un effet d'hover à l'image de la carte (par défaut: true)
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la cascade
Exemple
Votre sélection
-
3 x Entrée plein tarif à 3,50 €
10,50 €
-
2 x Entrée plein tarif à 28,00 €
56,00 €
-
Total : 67,00 €
Votre sélection
-
3 x Entrée plein tarif à 3,50 €
10,50 €
-
2 x Entrée plein tarif à 28,00 €
56,00 €
-
Total : 67,00 €
<#assign ls = [
{"title":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "url":"https://paris.fr", "target":"_blank"},
{"title":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "url":"https://paris.fr", "target":"_blank"},
{"title":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "url":"https://paris.fr", "target":"_blank"}
]>
<@cRow>
<@cCol>
<@cBlock params='style="height: 450px; position: relative;"'>
<@cCardFloating id='float' title='Carte Flotante' class='d-block'>
<@cList items=ls class='list-highlight-secondary'/>
</@cCardFloating>
</@cBlock>
</@cCol>
<@cCol>
<@cBlock params='style="height: 450px; position: relative;"'>
<@cCardFloating id='float' dismissible=false title='Carte Flotante' class='d-block'>
<@cList items=ls class='list-highlight-secondary'/>
</@cCardFloating>
</@cBlock>
</@cCol>
<@cCol>
<@cBlock params='style="height: 450px; position: relative;"'>
<@cCardFloating id='float' dismissible=false title='Votre sélection' class='d-block'>
<@chList class='list-unstyled'>
<@chItem>
<@cText class='d-flex align-items-start'>3 x Entrée plein tarif à 3,50 €<@cBtn class='link p-0 ms-auto' label=''><@parisIcon class='main-danger-color pe-0' name='close' /></@cBtn></@cText>
<@cText class='mt-0 fw-bold'>10,50 €</@cText>
</@chItem>
<@chItem>
<@cText class='d-flex align-items-start'>2 x Entrée plein tarif à 28,00 €<@cBtn class='link p-0 ms-auto' label=''><@parisIcon class='main-danger-color pe-0' name='close' /></@cBtn></@cText>
<@cText class='mt-0 fw-bold'>56,00 €</@cText>
</@chItem>
<@chItem><@cText>Total : <@cInline type='strong'>67,00 €</@cInline></@cText></@chItem>
</@chList>
</@cCardFloating>
</@cBlock>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cBlock params='style="height: 450px; position: relative;"'>
<@cCardFloating id='float2' title='Carte Flotante Secondary' class='d-block secondary'>
<@cList items=ls class='list-highlight-secondary'/>
</@cCardFloating>
</@cBlock>
</@cCol>
<@cCol>
<@cBlock params='style="height: 450px; position: relative;"'>
<@cCardFloating id='float2' title='Votre sélection' class='d-block secondary' dismissible=false >
<@chList class='list-unstyled'>
<@chItem>
<@cText class='d-flex align-items-start'>3 x Entrée plein tarif à 3,50 €<@cBtn class='link p-0 ms-auto' label=''><@parisIcon class='main-danger-color pe-0' name='close' /></@cBtn></@cText>
<@cText class='mt-0 fw-bold'>10,50 €</@cText>
</@chItem>
<@chItem>
<@cText class='d-flex align-items-start'>2 x Entrée plein tarif à 28,00 €<@cBtn class='link p-0 ms-auto' label=''><@parisIcon class='main-danger-color pe-0' name='close' /></@cBtn></@cText>
<@cText class='mt-0 fw-bold'>56,00 €</@cText>
</@chItem>
<@chItem><@cText>Total : <@cInline type='strong'>67,00 €</@cInline></@cText></@chItem>
</@chList>
</@cCardFloating>
</@cBlock>
</@cCol>
</@cRow>
<div class="row ">
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-title-container">
<h3 class="card-title">
Carte Flotante</h3>
<button type="button" class="btn-close" aria-label="Close" data-bs-target="#float-card" data-bs-dismiss="alert" title="Close"></button>
</div>
<div class="card-body">
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-title-container">
<h3 class="card-title">
Carte Flotante</h3>
</div>
<div class="card-body">
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-title-container">
<h3 class="card-title">
Votre sélection</h3>
</div>
<div class="card-body">
<ul class="list-unstyled" >
<li>
<p class="d-flex align-items-start">
3 x Entrée plein tarif à 3,50 €
<button class="btn btn-link p-0 ms-auto" type="submit">
<svg class="paris-icon paris-icon-close main-danger-color pe-0"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<p class="mt-0 fw-bold">
10,50 €</p>
</li>
<li>
<p class="d-flex align-items-start">
2 x Entrée plein tarif à 28,00 €
<button class="btn btn-link p-0 ms-auto" type="submit">
<svg class="paris-icon paris-icon-close main-danger-color pe-0"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<p class="mt-0 fw-bold">
56,00 €</p>
</li>
<li>
<p>
Total :
<strong>
67,00 €</strong>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block secondary" id="float2-card" >
<div class="card-title-container">
<h3 class="card-title">
Carte Flotante Secondary</h3>
<button type="button" class="btn-close" aria-label="Close" data-bs-target="#float2-card" data-bs-dismiss="alert" title="Close"></button>
</div>
<div class="card-body">
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block secondary" id="float2-card" >
<div class="card-title-container">
<h3 class="card-title">
Votre sélection</h3>
</div>
<div class="card-body">
<ul class="list-unstyled" >
<li>
<p class="d-flex align-items-start">
3 x Entrée plein tarif à 3,50 €
<button class="btn btn-link p-0 ms-auto" type="submit">
<svg class="paris-icon paris-icon-close main-danger-color pe-0"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<p class="mt-0 fw-bold">
10,50 €</p>
</li>
<li>
<p class="d-flex align-items-start">
2 x Entrée plein tarif à 28,00 €
<button class="btn btn-link p-0 ms-auto" type="submit">
<svg class="paris-icon paris-icon-close main-danger-color pe-0"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<p class="mt-0 fw-bold">
56,00 €</p>
</li>
<li>
<p>
Total :
<strong>
67,00 €</strong>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
required- l'ID de la carte
-
title (string)
optionnal- définit le titre de la carte
-
titleLevel (string)
optionnal- défaut 3, permet de modifier le niveau du titre de la carte si besoin, pour respecter les normes accessibliité
-
class (string)
optionnal- permet d'ajouter une classe CSS à la carte
-
dismissible (boolean)
optionnal- permet d'activer la fermeture de la carte (par défaut: true)
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la carte
Exemple
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Title example
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Example avec 3 col pour le breakpoint "md" ou 4 pour le breakpoint "lg"
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Title example
Title example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<@cTitle level=4 class='ml-l'>Example défaut</@cTitle>
<@cCardLayout class='mt-0'>
<@cCol>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cBlock class='text-end'><@cBtn label='Text example' class='primary mt-m' /></@cBlock>
</@cCard>
</@cCol>
<@cCol>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCard>
</@cCol>
<@cCol>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' />
</@cCol>
<@cCol>
<@cCard title='Title example'>
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cBlock class='text-end'><@cBtn label='Text example' class='primary mt-m' /></@cBlock>
</@cCard>
</@cCol>
</@cCardLayout>
<@cTitle level=4 class='ml-l'>Example avec 3 col pour le breakpoint "md" ou 4 pour le breakpoint "lg"</@cTitle>
<@cCardLayout class='mt-0' rowCols='md-3 row-lg-4'>
<@cCol>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cBlock class='text-end'><@cBtn label='Text example' class='primary mt-m' /></@cBlock>
</@cCard>
</@cCol>
<@cCol>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' >
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
</@cCard>
</@cCol>
<@cCol>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' />
</@cCol>
<@cCol>
<@cCard title='Title example'>
<@cText class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</@cText>
<@cBlock class='text-end'><@cBtn label='Text example' class='primary mt-m' /></@cBlock>
</@cCard>
</@cCol>
</@cCardLayout>
<div class="row g-4 row-cols-1 row-cols-md-3 mt-0">
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<h4 class="ml-l">
Example avec 3 col pour le breakpoint "md" ou 4 pour le breakpoint "lg"</h4>
<div class="row g-4 row-cols-1 row-cols-md-3 row-lg-4 mt-0">
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID de la grille de cartes
-
class (string)
optionnal- permet d'ajouter une classe CSS à la grille de cartes
-
type (string)
optionnal- permet de définir le type de la grille de carte (par défaut: ''))
-
rowCols (string)
optionnal- permet de spécifier le nombre de colonnes par ligne dans une disposition de type "row columns". Valeur par defaut "md-3" pour 3 colonne pour breakpoint "md"
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la grille de cartes
Exemple
La Macro cConsentTac permet la gestion du consentement en utilisant la librairie TarteAuCitron .
Vous pouvez cliquer sur le bouton "Cookie" situé en bas à droite de cet écran pour visualiser la fenêtre de gestion des cookies.
<@cConsentTac title=favourite />
<#-- Tarte au Citron Service : MonParis -default- -->
<@cConsentTacService />
<#-- Tarte au Citron Service : Matomo -->
<@cConsentTacService code='matomohightrack'>
${matomo!}
</@cConsentTacService>
</@cConsentTac>
<link rel="stylesheet" href="themes/skin/parisfr/js/vendor/tarteaucitron/css/theme-tac.min.css" >
<script src="themes/skin/parisfr/js/vendor/tarteaucitron/tarteaucitron.min.js"></script>
<!-- Service Mon Paris -->
<script>
tarteaucitronCustomText = {
"privacyUrl":"Politique de cookie","alertBigPrivacy": "Afin de rendre ses services plus performants, d’améliorer l’expérience utilisateur et la manière dont les contenus vous sont présentés, nous analysons la façon dont <a href=https://www.paris.fr/pages/cookies-234>le service numérique est utilisé grâce à des cookies</a>"
};
tarteaucitron.services.monparis = {
"key": "monparis",
"type": "api",
"name": "Mon Paris",
"uri": "https://moncompte.paris.fr",
"readmoreLink": "https://www.paris.fr/pages/cookies-234",
"needconsent": false,
"useExternalCss" : true,
"mandatory": true,
"cookies": ['mcpAuth','JSESSIONID','AUTH_SESSION_ID','KEYCLOAK_IDENTITY','KEYCLOAK_SESSION'],
"js": function () {
"use strict";
},
"fallback": function () {
"use strict";
// fallback code if consent is not given
},
};
tarteaucitron.init({
"bodyPosition": "top", /* Tag positionné en haut pour accessibilité */
"privacyUrl": "//www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees", /* Privacy policy url */
"hashtag": "#cookiepolicycitelibre", /* Open the panel with this hashtag */
"cookieName": "cookieparisfr", /* Cookie name */
"orientation": "bottom", /* Banner position (top - bottom) */
"groupServices": false, /* Group services by category */
"showDetailsOnClick": true, /* Click to expand the description */
"serviceDefaultState": "wait", /* Default state (true - wait - false) */
"showAlertSmall": false, /* Show the small banner on bottom right */
"showIcon": true, /* Show cookie icon to manage cookies */
// "iconSrc": "", /* Optional: URL or base64 encoded image */
"iconPosition": "bottomRight", /* Position of the icon between BottomRight, BottomLeft, TopRight and TopLeft */
"cookieslist": true, /* Show the cookie list */
"adblocker": true, /* Show a Warning if an adblocker is detected */
"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
"DenyAllCta" : true, /* Show the Deny all button when highPrivacy on */
"highPrivacy": true, /* Disable auto consent */
"alwaysNeedConsent": true, /* Ask the consent for "Privacy by design" services */
"handleBrowserDNTRequest": true,/* If Do Not Track == 1, disallow all */
"removeCredit": false, /* Remove credit link */
"moreInfoLink": true, /* Show more info link */
"useExternalCss": true, /* If false, the tarteaucitron.css file will be loaded */
"readmoreLink": "https://www.paris.fr/pages/cookies-234", /* Change the default readmore link */
"mandatory": true, /* Show a message about mandatory cookies */
"mandatoryCta": true, /* Show the disabled accept button when mandatory on */
"customCloserId": "tac", /* Optional a11y: Custom element ID used to open the panel */
"googleConsentMode": true, /* Enable Google Consent Mode v2 for Google ads and GA4 */
"bingConsentMode": true, /* Enable Bing Consent Mode for Clarity and Bing Ads */
"softConsentMode": false, /* Soft consent mode (consent is required to load the services) */
"dataLayer": false, /* Send an event to dataLayer with the services status */
"serverSide": false, /* Server side only, tags are not loaded client side */
"partnersList": true /* Details the number of partners on the popup and middle banner */
});
(tarteaucitron.job = tarteaucitron.job || []).push('monparis');
(tarteaucitron.job = tarteaucitron.job || []).push('matomohightrack');
<!-- Add link to privacy policy in alert message -->
document.addEventListener('DOMContentLoaded', function() {
function addPrivacyLink() {
const tarteaucitronRoot = document.querySelector('#tarteaucitronRoot');
const privacyLink = document.querySelector('#tarteaucitronPrivacyUrl');
const confLink = document.querySelector('#tarteaucitronConsentUrl');
if( privacyLink && tarteaucitronRoot && confLink === null ) {
// Add new link after privacyLink
const newLink = document.createElement('a');
newLink.id = 'tarteaucitronConsentUrl';
newLink.href = 'https://www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees';
newLink.textContent = 'Politique de confidentialité';
privacyLink.insertAdjacentHTML('afterend', newLink.outerHTML);
} else if (typeof tarteaucitron !== 'undefined') {
// Wait a bit more for DOM elements to be created
setTimeout(addPrivacyLink, 100);
}
}
// Wait for tarteaucitron to be loaded
function waitForTarteaucitron() {
if (typeof tarteaucitron !== 'undefined') {
addPrivacyLink();
} else {
setTimeout( waitForTarteaucitron, 50);
}
}
waitForTarteaucitron();
});
</script>
<p class="lead">
La Macro cConsentTac permet la gestion du consentement en utilisant la librairie
<a href="https://tarteaucitron.io/fr/install/" target="_blank" >
<span class="link-label">TarteAuCitron</span>
</a>
.</p>
<p class="lead">
Vous pouvez cliquer sur le bouton "Cookie" situé en bas à droite de cet écran pour visualiser la fenêtre de gestion des cookies.</p>Paramètres
Elément @cConsentTac: Gestion des Cookies CNIL ave cla librairie TarteAuCitron - https://tarteaucitron.io/fr /
Voici la liste des différents paramètres de la macro :
-
title (string)
optionnal- le titre du consentement (par défaut: 'Ce site')
-
lang (string)
optionnal- Objet JSON des traductions personnalisées pour remplacer les textes par défaut (par défaut: '')
-
privacyLink (string)
optionnal- Lien vers la page de protection des données personnelles de Paris.fr (par défaut: '//www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees')
-
showIcon (boolean)
optionnal- Option permettant d'afficher l'icône TarteAu Citron' (par défaut: false)
-
iconPosition (string)
optionnal- Option permettant d'afficher le bouton "Gestion des cookies" à gauche ou à droite, en haut ou en bas (par défaut: 'bottomRight')
-
cookieMenu (string)
optionnal- Libellé du ien footer pour gérer les cookies (par défaut: 'Gestion des cookies')
-
cookiePolicyLink (string)
optionnal- Lien vers la page Gestion des cookies de Paris.fr. (par défaut: 'https://www.paris.fr/pages/cookies-234')
-
alertConfidentialityLabel (string)
optionnal- Libellé de l'alerte de confidentialité (par défaut: 'Politique de confidentialité')
-
alertConfidentialityLink (string)
optionnal- Lien vers la politique de confidentialité (par défaut: 'https://www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees')
-
hashtag (string)
optionnal- Identifiant pour modal de gestion du consentement (par défaut: 'cookiepolicyparisfr')
-
cookiename (string)
optionnal- Nom du cookie posé pour le consentement (par défaut: 'cookieparisfr')
-
nocredit (boolean)
optionnal- Option permettant d'afficher les crédit du projet TarteAuCitron (par défaut: false)
Macro cConsentTacService
Un seul attribut "code" qui a par défaut la valeur 'monparis'. Ce code qui permet de déclarer autant de services, 116 à ce jour (Google, Twitter...), TarteAuCitron que nécessaire en fonction des services présent sur le site. Voir la documentation d'installation
Par défaut le fichier "WEB-INF\templates\skin\site\themeparisfr_frameset_footer_js.html" contient deux services, monparis et matomo. Les service Matomo est spécifique à la Ville de Paris. Les identifiants et urls sont gérés par le plugin Matomo. En cas de site non Lutece vous devez supprimer tag freemarker ${matomo} .
Exemple
Exemple Stepper
-
Step 1 of 5
Text example
content -
Step 2 of 5
Text example
content -
Step 3 of 5
Text example
content -
Step 4 of 5
Text example
content -
Step 5 of 5
Text example
content
Exemple Stepper 1
-
Step 1 of 5
Text example
content -
Step 2 of 5
Text example
content -
Step 3 of 5
Text example
content -
Step 4 of 5
Text example
content -
Step 5 of 5
Text example
content
Exemple Stepper 2
-
Step 1 of 5
Text example
content -
Step 2 of 5
Text example
content -
Step 3 of 5
Text example
content -
Step 4 of 5
Text example
content -
Step 5 of 5
Text example
content
Exemple Stepper 3
-
Step 1 of 5
Text example
content -
Step 2 of 5
Text example
content -
Step 3 of 5
Text example
content -
Step 4 of 5
Text example
content -
Step 5 of 5
Text example
content
Exemple Stepper 4
-
Step 1 of 5
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
Step 2 of 5
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
Step 3 of 5
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
Step 4 of 5
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
Step 5 of 5
Text example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<#assign lstep = [
{"title":"Text example", "url":"images/fa-battery-0.png", "status":"started", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-1.png", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-2.png", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-3.png", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-4.png", "content":"content"}
]>
<@cBlock class='stepper-wrapper px-1 px-xl-5 pb-xl'>
<@cTitle level=3 class='mb-xl'>Exemple Stepper</@cTitle>
<@cStepper lstep />
<#assign lstep1 = [
{"title":"Text example", "url":"images/fa-battery-0.png", "status":"done", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-1.png", "status":"in-progress", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-2.png", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-3.png", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-4.png", "content":"content"}
]>
</@cBlock>
<@cBlock class='stepper-wrapper px-1 px-xl-5 pb-xl'>
<@cTitle level=3 class='mb-xl'>Exemple Stepper 1</@cTitle>
<@cStepper lstep1 />
</@cBlock>
<#assign lstep2 = [
{"title":"Text example", "url":"images/fa-battery-0.png", "status":"done", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-1.png", "status":"started", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-2.png", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-3.png", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-4.png", "content":"content"}
]>
<@cBlock class='stepper-wrapper px-1 px-xl-5 pb-xl'>
<@cTitle level=3 class='mb-xl'>Exemple Stepper 2</@cTitle>
<@cStepper steps=lstep2 params='style="--title-w:180px"' />
</@cBlock>
<#assign lstep3 = [
{"title":"Text example", "url":"images/fa-battery-0.png", "status":"done", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-1.png", "status":"done", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-2.png", "status":"started", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-3.png", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-4.png", "content":"content"}
]>
<@cBlock class='stepper-wrapper px-1 px-xl-5 pb-xl'>
<@cTitle level=3 class='mb-xl'>Exemple Stepper 3</@cTitle>
<@cStepper steps=lstep3 haspicto=true/>
</@cBlock>
<#assign lstep4 = [
{"title":"Text example", "url":"images/fa-battery-0.png", "status":"done", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-1.png", "status":"done", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-2.png", "status":"done", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-3.png", "status":"done", "content":"content"},
{"title":"Text example", "url":"images/fa-battery-4.png", "status":"started", "content":"content"}
]>
<@cBlock class='stepper-wrapper px-1 px-xl-5 pb-xl'>
<@cTitle level=3 class='mb-xl'>Exemple Stepper 4</@cTitle>
<@cStepper steps=lstep4 showMore=true/>
</@cBlock>
<div class="stepper-wrapper px-1 px-lg-5 ms-0 ms-xl-5 pb-xl">
<h3 class="mb-xl">
Exemple Stepper</h3>
<div class="stepper">
<ol class="stepper-list " >
<li class="started">
<div class="idx" data-idx="1" aria-hidden="true">
<span>1</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 1 of 5</p>
<p id="step-title-1" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
<li>
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 2 of 5</p>
<p id="step-title-2" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 3 of 5</p>
<p id="step-title-3" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="4" aria-hidden="true">
<span>4</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 4 of 5</p>
<p id="step-title-4" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 5 of 5</p>
<p id="step-title-5" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
</div>
<div class="stepper-wrapper px-1 px-lg-5 ms-0 ms-xl-5 pb-xl">
<h3 class="mb-xl">
Exemple Stepper 1</h3>
<div class="stepper">
<ol class="stepper-list " >
<li class="done">
<div class="idx" data-idx="1" aria-hidden="true">
<svg class="paris-icon paris-icon-check main-color"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-label="Step {0} done">
<use href="#paris-icon-check"></use>
</svg> </div>
<p class="d-block d-sm-none text-secondary fs-5">Step 1 of 5</p>
<p id="step-title-1" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="in-progress"aria-current="step">
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 2 of 5</p>
<p id="step-title-2" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line start"></div>
<div class="bs-stepper-line end"></div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 3 of 5</p>
<p id="step-title-3" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="4" aria-hidden="true">
<span>4</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 4 of 5</p>
<p id="step-title-4" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 5 of 5</p>
<p id="step-title-5" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
</div>
<div class="stepper-wrapper px-1 px-lg-5 ms-0 ms-xl-5 pb-xl">
<h3 class="mb-xl">
Exemple Stepper 2</h3>
<div class="stepper">
<ol class="stepper-list " style="--title-w:180px" >
<li class="done">
<div class="idx" data-idx="1" aria-hidden="true">
<svg class="paris-icon paris-icon-check main-color"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-label="Step {0} done">
<use href="#paris-icon-check"></use>
</svg> </div>
<p class="d-block d-sm-none text-secondary fs-5">Step 1 of 5</p>
<p id="step-title-1" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="started">
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 2 of 5</p>
<p id="step-title-2" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 3 of 5</p>
<p id="step-title-3" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="4" aria-hidden="true">
<span>4</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 4 of 5</p>
<p id="step-title-4" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 5 of 5</p>
<p id="step-title-5" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
</div>
<div class="stepper-wrapper px-1 px-lg-5 ms-0 ms-xl-5 pb-xl">
<h3 class="mb-xl">
Exemple Stepper 3</h3>
<div class="stepper">
<ol class="stepper-list " >
<li class="done">
<figure class="p-3 mb-0" data-idx="1" aria-hidden="true">
<img src="images/fa-battery-0.png" class="img-fluid" title="" alt="Text example" aria-hidden="true">
</figure>
<p class="d-block d-sm-none text-secondary fs-5">Step 1 of 5</p>
<p id="step-title-1" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="done">
<figure class="p-3 mb-0" data-idx="2" aria-hidden="true">
<img src="images/fa-battery-1.png" class="img-fluid" title="" alt="Text example" aria-hidden="true">
</figure>
<p class="d-block d-sm-none text-secondary fs-5">Step 2 of 5</p>
<p id="step-title-2" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="started">
<figure class="p-3 mb-0" data-idx="3" aria-hidden="true">
<img src="images/fa-battery-2.png" class="img-fluid" title="" alt="Text example" aria-hidden="true">
</figure>
<p class="d-block d-sm-none text-secondary fs-5">Step 3 of 5</p>
<p id="step-title-3" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
<li>
<figure class="p-3 mb-0" data-idx="4" aria-hidden="true">
<img src="images/fa-battery-3.png" class="img-fluid" title="" alt="Text example" aria-hidden="true">
</figure>
<p class="d-block d-sm-none text-secondary fs-5">Step 4 of 5</p>
<p id="step-title-4" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<figure class="p-3 mb-0" data-idx="5" aria-hidden="true">
<img src="images/fa-battery-4.png" class="img-fluid" title="" alt="Text example" aria-hidden="true">
</figure>
<p class="d-block d-sm-none text-secondary fs-5">Step 5 of 5</p>
<p id="step-title-5" class="stepper-title">Text example</p>
<div class="stepper-content">content</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
</div>
<div class="stepper-wrapper px-1 px-lg-5 ms-0 ms-xl-5 pb-xl vh-20">
<h3 class="mb-xl">
Exemple Stepper 4</h3>
<div class="stepper">
<ol class="stepper-list " >
<li class="done">
<div class="idx" data-idx="1" aria-hidden="true">
<svg class="paris-icon paris-icon-check main-color"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-label="Step {0} done">
<use href="#paris-icon-check"></use>
</svg> </div>
<p class="d-block d-sm-none text-secondary fs-5">Step 1 of 5</p>
<p id="step-title-1" class="stepper-title">Text example</p>
<div class="stepper-content truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="stepper-footer">
<button type='button' class='btn btn-stepper-more main-color btn-mini'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-plus"></use>
</svg> <span class="button-label">Show more</span>
</button>
<button type="button" class="btn btn-stepper-less main-color btn-mini">
<svg class="paris-icon paris-icon-minus"data-mce-svg="paris-icon paris-icon-minus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-minus"></use>
</svg> <span class="button-label">Close</span>
</button>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="done">
<div class="idx" data-idx="2" aria-hidden="true">
<svg class="paris-icon paris-icon-check main-color"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-label="Step {0} done">
<use href="#paris-icon-check"></use>
</svg> </div>
<p class="d-block d-sm-none text-secondary fs-5">Step 2 of 5</p>
<p id="step-title-2" class="stepper-title">Text example</p>
<div class="stepper-content truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="stepper-footer">
<button type='button' class='btn btn-stepper-more main-color btn-mini'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-plus"></use>
</svg> <span class="button-label">Show more</span>
</button>
<button type="button" class="btn btn-stepper-less main-color btn-mini">
<svg class="paris-icon paris-icon-minus"data-mce-svg="paris-icon paris-icon-minus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-minus"></use>
</svg> <span class="button-label">Close</span>
</button>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="done">
<div class="idx" data-idx="3" aria-hidden="true">
<svg class="paris-icon paris-icon-check main-color"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-label="Step {0} done">
<use href="#paris-icon-check"></use>
</svg> </div>
<p class="d-block d-sm-none text-secondary fs-5">Step 3 of 5</p>
<p id="step-title-3" class="stepper-title">Text example</p>
<div class="stepper-content truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="stepper-footer">
<button type='button' class='btn btn-stepper-more main-color btn-mini'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-plus"></use>
</svg> <span class="button-label">Show more</span>
</button>
<button type="button" class="btn btn-stepper-less main-color btn-mini">
<svg class="paris-icon paris-icon-minus"data-mce-svg="paris-icon paris-icon-minus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-minus"></use>
</svg> <span class="button-label">Close</span>
</button>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="done">
<div class="idx" data-idx="4" aria-hidden="true">
<svg class="paris-icon paris-icon-check main-color"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-label="Step {0} done">
<use href="#paris-icon-check"></use>
</svg> </div>
<p class="d-block d-sm-none text-secondary fs-5">Step 4 of 5</p>
<p id="step-title-4" class="stepper-title">Text example</p>
<div class="stepper-content truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="stepper-footer">
<button type='button' class='btn btn-stepper-more main-color btn-mini'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-plus"></use>
</svg> <span class="button-label">Show more</span>
</button>
<button type="button" class="btn btn-stepper-less main-color btn-mini">
<svg class="paris-icon paris-icon-minus"data-mce-svg="paris-icon paris-icon-minus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-minus"></use>
</svg> <span class="button-label">Close</span>
</button>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="started">
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<p class="d-block d-sm-none text-secondary fs-5">Step 5 of 5</p>
<p id="step-title-5" class="stepper-title">Text example</p>
<div class="stepper-content truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="stepper-footer">
<button type='button' class='btn btn-stepper-more main-color btn-mini'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-plus"></use>
</svg> <span class="button-label">Show more</span>
</button>
<button type="button" class="btn btn-stepper-less main-color btn-mini">
<svg class="paris-icon paris-icon-minus"data-mce-svg="paris-icon paris-icon-minus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-minus"></use>
</svg> <span class="button-label">Close</span>
</button>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
</ol>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du stepper
-
class (string)
optionnal- ajoute une classe CSS au stepper
-
steps (object)
required- définit l'objet comprenant les informations pour chaque étape
-
haspicto (boolean)
optionnal- permet de définir si le stepper doit afficher les images comprises dans l'objet 'steps' (par défaut: false)
-
hasidx (boolean)
optionnal- affiche un index sous forme de puce sur une étape (par défaut: false)
-
title (boolean)
optionnal- affiche le contenu de 'title' de l'objet 'steps' avec un style de titre (par défaut: false)
-
titleLevel (number)
optionnal- définit le niveau de titre pour le contenu de 'title' de l'objet 'steps' (par défaut: 3)
-
showMore (boolean)
optionnal- permet d'afficher un bouton pour afficher le contenu de steps (par defaut: false)
-
labelMore (string)
optionnal- Libellé du bouton pour afficher le contenu (par défaut: i18n("themeparisfr.labelShowMore"))
-
a11StatusMsg (string)
optionnal- Libellé pour accessibilité inclu un texte de statut masqué
-
params (string)
optionnal- permet d'ajouter des parametres HTML au stepper
Aide
Ce composant est uniquement éditorial et permet de présenter graphiquement des étapes.
Il est possible de paramétrer les éléments du stepper en utilisant les variables css décrites ci-dessous.
Par exemple, la largeur du titre peut se régler en utilisant la variable css "--title-w" -voir exemple "Stepper 2"- avec l'ajout du paramètre "param" dans la macro
<@cStepper steps=lstep2 params='style="--title-w:180px"' />- --title-w: par défaut 200px - définit la largeur du titre
- --title-fs: par défaut var(--font-xl) - définit la taille de police du titre
- --title-lh: par défaut var(--line-height-sm) - définit la hauteur de ligne du titre
- --content-w: par défaut 160px - définit la largeur du contenu et du footer
- --content-mh: par défaut 80px - définit la hauteur minimale du contenu
- --content-fs: par défaut var(--font-m) - définit la taille de police du contenu
- --content-fw: par défaut 400 - définit le poids de la police du contenu
- --content-lh: par défaut var(--line-height-m) - définit la hauteur de ligne du contenu
- --content-bg: par défaut var(--theme-bg-body-default) - définit la couleur de fond du contenu
- --content-color: par défaut var(--main-color) - définit la couleur du texte du contenu
- --content-overflow-y: par défaut auto - définit le débordement du contenu
- --content-align: par défaut text-center - définit l'alignement du contenu
Exemple
-
Etape Vide -
Etape 50% -
Etape 100%
-
Etape Vide Etape Vide
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 50% Etape 50%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 100% Etape 100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape Vide
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 50%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape Vide Etape Vide
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 25% Etape 25%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 50% Etape 50%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 75% Etape 75%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 100% Etape 100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape Vide
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 25%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 50%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 75%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
-
Etape 100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
<#assign lstep1 = [
{"title":"Etape Vide","content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", "url":"images/icon-placeholder.svg"},
{"title":"Etape 50% ","content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", "url":"images/icon-placeholder.svg"},
{"title":"Etape 100%","content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", "url":"images/icon-placeholder.svg"}
]>
<#assign lstep2 = [
{"title":"Etape Vide","content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."},
{"title":"Etape 50% ","content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."},
{"title":"Etape 100%","content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."}
]>
<#assign lstep3 = [
{"title":"Etape Vide", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", "url":"images/icon-placeholder.svg"},
{"title":"Etape 25% ", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", "url":"images/icon-placeholder.svg"},
{"title":"Etape 50% ", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", "url":"images/icon-placeholder.svg"},
{"title":"Etape 75% ", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", "url":"images/icon-placeholder.svg"},
{"title":"Etape 100%", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", "url":"images/icon-placeholder.svg"}
]>
<#assign lstep4 = [
{"title":"Etape Vide", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."},
{"title":"Etape 25% ", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."},
{"title":"Etape 50% ", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."},
{"title":"Etape 75% ", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."},
{"title":"Etape 100%", "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."}
]>
<@cInfoStep steps=lstep1 haspicto=true title=true />
<@cInfoStep steps=lstep2 title=true />
<@cInfoStep steps=lstep3 haspicto=true title=true verticalStepper=true />
<@cInfoStep steps=lstep4 title=true verticalStepper=true />
<div class="container ">
<div class="row ">
<div class="col ">
<div class="c-info-step-wrapper stepper-horizontal c-info-step-default" >
<ol class="c-info-step-icons d-none d-md-flex">
<li class="c-info-step-icons__item">
<figure >
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape Vide</figcaption>
</figure>
</li>
<li class="c-info-step-icons__item">
<figure >
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape 50% </figcaption>
</figure>
</li>
<li class="c-info-step-icons__item">
<figure >
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape 100%</figcaption>
</figure>
</li>
</ol>
<ol class="c-info-step" >
<li class="c-info-step__item">
<div class="c-info-step__icon d-md-none">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape Vide</figcaption>
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape Vide</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon d-md-none">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape 50% </figcaption>
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 50% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon d-md-none">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape 100%</figcaption>
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 100%</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
</ol>
</div>
<script>
function handleResize() {
const width = window.innerWidth;
const elements = document.querySelectorAll('.c-info-step-default');
elements.forEach(function(element) {
if (width <= 767) {
element.classList.remove('stepper-horizontal');
element.classList.add('stepper-vertical');
} else {
element.classList.remove('stepper-vertical');
element.classList.add('stepper-horizontal');
}
});
}
window.addEventListener('resize', handleResize);
handleResize();
</script>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="c-info-step-wrapper stepper-horizontal c-info-step-default" >
<ol class="c-info-step" >
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape Vide</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 50% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 100%</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
</ol>
</div>
<script>
function handleResize() {
const width = window.innerWidth;
const elements = document.querySelectorAll('.c-info-step-default');
elements.forEach(function(element) {
if (width <= 767) {
element.classList.remove('stepper-horizontal');
element.classList.add('stepper-vertical');
} else {
element.classList.remove('stepper-vertical');
element.classList.add('stepper-horizontal');
}
});
}
window.addEventListener('resize', handleResize);
handleResize();
</script>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="c-info-step-wrapper stepper-vertical" >
<ol class="c-info-step" >
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape Vide</figcaption>
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape Vide</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape 25% </figcaption>
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 25% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape 50% </figcaption>
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 50% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape 75% </figcaption>
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 75% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" alt="" aria-hidden="true">
<figcaption class="visually-hidden">Etape 100%</figcaption>
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 100%</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
</ol>
</div>
</div>
<div class="col ">
<div class="c-info-step-wrapper stepper-vertical" >
<ol class="c-info-step" >
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape Vide</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 25% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 50% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 75% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 100%</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du stepper
-
class (string)
optionnal- ajoute une classe CSS au stepper
-
steps (object)
required- définit l'objet comprenant les informations pour chaque étape du stepper
-
haspicto (string)
optionnal- permet de définir si le stepper doit afficher les images comprises dans l'objet 'steps' (par défaut: false)
-
title (string)
optionnal- affiche le contenu de 'title' de l'objet 'steps' avec un style de titre (par défaut: false)
-
verticalStepper (boolean)
optionnal- permet d'afficher le stepper à la verticale (par défaut: false)
-
imgClass (string)
optionnal- permet d'ajouter une classe css pour les icones du stepper
-
params (string)
optionnal- permet d'ajouter des parametres HTML au stepper
Aide
Ce composant est uniquement éditorial et permet de présenter graphiquement des étapes.
La précédente version de l'InfoStep est disponible en utilisant la macro cInfoStepOld
Exemple
<@cForm>
<@cText><@cLink label='Visualiser un formulaire complet' href='jsp/site/Portal.jsp?page_id=8' /></@cText>
</@cForm>
<form method="post">
<p>
<a href="jsp/site/Portal.jsp?page_id=8" >
<span class="link-label">Visualiser un formulaire complet</span>
</a>
</p>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du formulaire
-
class (string)
optionnal- ajoute une classe CSS au formulaire
-
method (string)
optionnal- permet de définir la valeur de l'attribut 'method' du formulaire (par défaut: 'post')
-
name (string)
optionnal- permet de définir la valeur de l'attribut 'name' du formulaire
-
role (string)
optionnal- permet de définir la valeur de l'attribut 'aria-label' du formulaire
-
action (string)
optionnal- permet de définir l'url de l'action du formulaire
-
params (string)
optionnal- permet d'ajouter des parametres HTML au formulaire
Exemple
<@cForm>
<@cRow>
<@cCol>
<@cField label='Code de réduction' for='reduc' required=false>
<@cInput name='reduc' placeholder='Exemple: A256' params='aria-describedby="help_reduc"' />
<@cFormHelp id='reduc' label='Saisir un code de réduction' />
</@cField>
</@cCol>
</@cRow>
<@cFieldset legend='Bloc Adresse' legendClass='ps-0'>
<@cRow>
<@cCol cols="12 col-sm-6">
<@cField label='Prénom' for='firstName' required=true>
<@cInput name='firstName' placeholder='Entrez le prénom' value='Martine' required=true params='autocomplete="given-name"'/>
</@cField>
</@cCol>
<@cCol cols="12 col-sm-6">
<@cField label='Nom' id='mylastname' for='lastName126' required=true>
<@cInput name='lastName126' placeholder='Entrez le nom' value='DUPONTEL' required=true params='autocomplete="family-name"'/>
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol cols="12">
<@cField label='Numéro et libellé de la voie' for='adresseVoie' required=true >
<@cInput name='adresseVoie' placeholder='Entrez le numéro et libellé de la voie' value='65 RUE PIERRE SEMARD' required=true params='aria-describedby="help_adresseVoie"' helpMsg='Commencez à saisir votre adresse pour sélectionner parmi les propositions' autocomplete='street-address'/>
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol cols="12">
<@cField label='Complément d’adresse' for='adresseComplement' required=false>
<@cInput name='adresseComplement' placeholder='Ex: ENTREE B RESIDENCE LES IRIS' params='autocomplete="address-line1"' />
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol cols="12">
<@cField label='Boîte postale ou lieu dit' for='adresseBP' required=false>
<@cInput name='adresseBP' placeholder='Entrez la boîte postale ou lieu dit' value='BP 75' params='autocomplete="address-line2"' />
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol cols="2">
<@cField label='Code postal' for='adresseCode' required=true>
<@cInput name='adresseCode' placeholder='Exemple: 75020' value='75012' required=true params='autocomplete="postal-code"'/>
</@cField>
</@cCol>
<@cCol cols="10">
<@cField label='Commune' for='adresseVille' required=true>
<@cInput name='adresseVille' placeholder='Exemple: Paris' value='Paris' required=true params='autocomplete="address-line3"'/>
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
</@cForm>
<form method="post">
<div class="row ">
<div class="col ">
<label class="form-label" for="reduc">
Code de réduction
</label>
<input type="text" class=" form-control" name="reduc" id="reduc" value="" placeholder="Exemple: A256" aria-label="Exemple: A256" aria-describedby="help_reduc">
<p class="form-text " id="help_reduc">
Saisir un code de réduction</p>
</div>
</div>
<fieldset id="fieldset-id-1163386147100761" role="group" aria-labelledby="legend-id-1163386147100761">
<legend class="ps-0" id="legend-id-1163386147100761" >Bloc Adresse</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<label class="form-label" for="firstName">
Prénom <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="firstName" id="firstName" value="Martine" placeholder="Entrez le prénom" aria-label="Entrez le prénom" autocomplete="given-name" required aria-required="true">
</div>
<div class="col-12 col-sm-6 ">
<div id="mylastname" >
<label class="form-label" for="lastName126">
Nom <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastName126" id="lastName126" value="DUPONTEL" placeholder="Entrez le nom" aria-label="Entrez le nom" autocomplete="family-name" required aria-required="true">
</div>
</div>
</div>
<div class="row ">
<div class="col-12 ">
<label class="form-label" for="adresseVoie">
Numéro et libellé de la voie <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<p class="form-text " id="help_adresseVoie">
Commencez à saisir votre adresse pour sélectionner parmi les propositions</p>
<input type="text" class=" form-control" name="adresseVoie" id="adresseVoie" value="65 RUE PIERRE SEMARD" placeholder="Entrez le numéro et libellé de la voie" aria-label="Entrez le numéro et libellé de la voie" autocomplete="street-address" aria-describedby="help_adresseVoie" required aria-required="true" aria-describedby="help_adresseVoie">
</div>
</div>
<div class="row ">
<div class="col-12 ">
<label class="form-label" for="adresseComplement">
Complément d’adresse
</label>
<input type="text" class=" form-control" name="adresseComplement" id="adresseComplement" value="" placeholder="Ex: ENTREE B RESIDENCE LES IRIS" aria-label="Ex: ENTREE B RESIDENCE LES IRIS" autocomplete="address-line1">
</div>
</div>
<div class="row ">
<div class="col-12 ">
<label class="form-label" for="adresseBP">
Boîte postale ou lieu dit
</label>
<input type="text" class=" form-control" name="adresseBP" id="adresseBP" value="BP 75" placeholder="Entrez la boîte postale ou lieu dit" aria-label="Entrez la boîte postale ou lieu dit" autocomplete="address-line2">
</div>
</div>
<div class="row ">
<div class="col-2 ">
<label class="form-label" for="adresseCode">
Code postal <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="adresseCode" id="adresseCode" value="75012" placeholder="Exemple: 75020" aria-label="Exemple: 75020" autocomplete="postal-code" required aria-required="true">
</div>
<div class="col-10 ">
<label class="form-label" for="adresseVille">
Commune <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="adresseVille" id="adresseVille" value="Paris" placeholder="Exemple: Paris" aria-label="Exemple: Paris" autocomplete="address-line3" required aria-required="true">
</div>
</div>
</fieldset>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du champs de formulaire
-
class (string)
optionnal- ajoute une classe CSS au champs de formulaire
-
label (string)
optionnal- définit le libellé du champs de formulaire
-
labelClass (string)
optionnal- permet d'ajouter une classe CSS au libellé du champs de formulaire
-
labelData (string)
optionnal- permet d'ajouter du texte supplémentaire en fin de libellé du champs de formulaire
-
for (string)
optionnal- permet de définir le lien entre le libellé et le champ, à répéter dans la Macro cInput
-
showLabel (boolean)
optionnal- permet d'afficher le label (par défaut: true)
-
required (boolean)
optionnal- permet d'indiquer si le champs est obligatoire, ajoute le libellé '(facultatif)' si false (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML au champs de formulaire
Exemple
<@cForm>
<@cFieldset legend='Etat-civil'>
<@cRow>
<@cCol cols="12 col-sm-6">
<@cField label='Prénom' for='firstNameF1' required=true>
<@cInput name='firstNameF1' placeholder='Entrez le prénom' value='Martine' />
</@cField>
</@cCol>
<@cCol cols="12 col-sm-6">
<@cField label='Nom' for='lastNameF1' required=true>
<@cInput name='lastNameF1' placeholder='Entrez le nom' value='DUPONTEL' />
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
<@cFieldset legend='Etat-civil 2' showLabel=false>
<@cRow>
<@cCol cols="12 col-sm-6">
<@cField label='Prénom' for='firstNameF2' required=true>
<@cInput name='firstNameF2' placeholder='Entrez le prénom' value='Martine' />
</@cField>
</@cCol>
<@cCol cols="12 col-sm-6">
<@cField label='Nom' for='lastNameF2' required=true>
<@cInput name='lastNameF2' placeholder='Entrez le nom' value='DUPONTEL' />
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
<@cFieldset legend='Etat-civil 3' legendClass='is-invalide' >
<@cRow>
<@cCol cols="12 col-sm-6">
<@cField label='Prénom' for='firstNameF3' required=true>
<@cInput name='firstNameF3' placeholder='Entrez le prénom' value='Martine' />
</@cField>
</@cCol>
<@cCol cols="12 col-sm-6">
<@cField label='Nom' for='lastNameF3' required=true>
<@cInput name='lastNameF3' placeholder='Entrez le nom' value='DUPONTEL' />
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
</@cForm>
<form method="post">
<fieldset id="fieldset-fs1" role="group" aria-labelledby="legend-fs1">
<legend id="legend-fs1" >Etat-civil</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<label class="form-label" for="firstNameF1">
Prénom <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF1" id="firstNameF1" value="Martine" placeholder="Entrez le prénom" aria-label="Entrez le prénom" required aria-required="true">
</div>
<div class="col-12 col-sm-6 ">
<label class="form-label" for="lastNameF1">
Nom <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastNameF1" id="lastNameF1" value="DUPONTEL" placeholder="Entrez le nom" aria-label="Entrez le nom" required aria-required="true">
</div>
</div>
</fieldset>
<fieldset id="fieldset-fs2" role="group" aria-labelledby="legend-fs2">
<legend class=" visually-hidden" id="legend-fs2" >Etat-civil 2</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<label class="form-label" for="firstNameF2">
Prénom <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF2" id="firstNameF2" value="Martine" placeholder="Entrez le prénom" aria-label="Entrez le prénom" required aria-required="true">
</div>
<div class="col-12 col-sm-6 ">
<label class="form-label" for="lastNameF2">
Nom <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastNameF2" id="lastNameF2" value="DUPONTEL" placeholder="Entrez le nom" aria-label="Entrez le nom" required aria-required="true">
</div>
</div>
</fieldset>
<fieldset id="fieldset-fs3" role="group" aria-labelledby="legend-fs3">
<legend class="is-invalide" id="legend-fs3" >Etat-civil 3</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<label class="form-label" for="firstNameF3">
Prénom <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF3" id="firstNameF3" value="Martine" placeholder="Entrez le prénom" aria-label="Entrez le prénom" required aria-required="true">
</div>
<div class="col-12 col-sm-6 ">
<label class="form-label" for="lastName">
Nom <span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastName" id="lastName" value="DUPONTEL" placeholder="Entrez le nom" aria-label="Entrez le nom" required aria-required="true">
</div>
</div>
</fieldset>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
legend (string)
optionnal- définit le libellé de la légende du fieldset
-
legendClass (string)
optionnal- permet d'ajouter une classe CSS à la légende du fieldset
-
legendParams (string)
optionnal- permet d'ajouter des parametres HTML à la légende du fieldset
-
role (string)
optionnal- permet de définir la valeur de l'attribut 'aria-label' du fieldset
-
helpMsg (string)
optionnal- permet de définir le message d'aide sur le fieldset
-
helpPos (string)
optionnal- par défaut "top" sinon "after" permet de définir la position le message d'aide sur le fieldset, par défaut au dessus du contenu après la légende
-
id (string)
optionnal- l'ID du fieldset
-
class (string)
optionnal- ajoute une classe CSS au fieldset
-
for (string)
optionnal- permet de définir le lien entre le fieldset et l'ID précisé
-
showLabel (boolean)
optionnal- permet d'afficher la légende (par défaut: true)
-
required (boolean)
optionnal- permet d'indiquer si le ou les champs contenu dans le fieldset sont obligatoires.
-
params (string)
optionnal- permet d'ajouter des parametres HTML au fieldset
Macro @cLegend
La macro cLegend est utilisée pour l'affichage de la légende dans la macro cFieldSet
Voici la liste des différents paramètres de la macro cLegend :
-
label (string)
optionnal- définit le libellé de la légende du fieldset
-
id (string)
optionnal- l'ID du fieldset
-
class (string)
optionnal- ajoute une classe CSS au fieldset
-
showLabel (boolean)
optionnal- permet de définir si le label est affichée ou pas sinon c'est le contenu de la macro "#nested" qui sera affiché. Par défaut true.
-
required (boolean)
optionnal- permet d'indiquer si le ou les champs contenu du fieldset sont obligatoires.
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la légende
Exemple
<@cRow>
<@cCol>
<@cLabel label='Nom' for='name' />
<@cInput name='name' type='text' value='Dupont' helpMsg='Saisir mon nom' />
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cLabel label='Prénom' for='name2' />
<@cInput name='name2' type='text' placeholder='Exemple: Jean Yves' helpMsg='Saisir mon prénom' />
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cLabel label='Informations' for='info' params='data-info="information"' />
<@cInput name='info' type='text' placeholder='Exemple: Choisir une place' helpMsg='Saisir une information' />
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cLabel label='Numéro de téléphone' for='numeroTel' />
<@cInput name='numeroTel' type='tel' placeholder='Ex : 06 38 49 40 02' helpMsg='Information example' />
</@cCol>
</@cRow>
<@cRow>
<@cCol class='4'>
<@cLabel label='Date avec date picker' for='datepicker_0'/>
<@cInputDate id='datepicker_0' name='name3' value=.now?date?iso_utc />
</@cCol>
</@cRow>
<form method="post">
<div class="row ">
<div class="col ">
<label class="form-label" for="namei">
Nom
</label>
<p class="form-text " id="help_namei">
Saisir mon nom</p>
<input type="text" class=" form-control" name="namei" id="namei" value="Dupont" aria-describedby="help_namei">
</div>
</div>
<div class="row ">
<div class="col ">
<label class="form-label" for="surnamei">
Prénom
</label>
<p class="form-text " id="help_surnamei">
Saisir mon prénom</p>
<input type="text" class=" form-control" name="surnamei" id="surnamei" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves" aria-describedby="help_surnamei">
</div>
</div>
<div class="row ">
<div class="col-12 col-md-2 ">
<label class="form-label" for="nbd">
Nombre enfants
</label>
<input type="number" class=" form-control" name="nbd" id="nbd" value="0">
</div>
</div>
<div class="row ">
<div class="col ">
<label class="form-label" for="info" data-info="information">
Informations
</label>
<p class="form-text " id="help_info">
Saisir une information</p>
<input type="text" class=" form-control" name="info" id="info" value="" placeholder="Exemple: Choisir une place" aria-label="Exemple: Choisir une place" aria-describedby="help_info">
</div>
<div class="col ">
<label class="form-label" for="numeroTel">
Numéro de téléphone
</label>
<p class="form-text " id="help_numeroTel">
Information example</p>
<input type="tel" class=" form-control fr-number" name="numeroTel" id="numeroTel" value="" placeholder="Ex : 06 38 49 40 02" aria-label="Ex : 06 38 49 40 02" aria-describedby="help_numeroTel">
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.fr-number').forEach(function(element) {
element.addEventListener('blur', function() {
var num = element.value;
var numFormatte = num
.replace(/^0(\d)(\s?)(\d{2})(\s?)(\d{2})(\s?)(\d{2})(\s?)(\d{2})$/, '+33 $1 $3 $5 $7 $9')
.replace(/^\+33(\d{9})$/, function(match, p1) {
return '+33 ' + p1.replace(/(\d)(\d{2})(\d{2})(\d{2})(\d{2})/, '$1 $2 $3 $4 $5');
});
element.value = numFormatte;
});
});
});
</script>
</div>
</div>
<div class="row ">
<div class="col-4 ">
<label class="form-label" for="datepicker_01">
Date avec date picker
</label>
<!-- Warning : wrong or deprecated argument(s) : label, ... -->
<div class="input-group">
<input type="text" class=" form-control" name="name3" id="datepicker_01" value="2025-10-25">
<span class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></span>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const elemdatepicker_01 = document.querySelector('#datepicker_01')
const dtOptionsdatepicker_01 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_01 = new themeParisFrDatepicker( elemdatepicker_01, dtOptionsdatepicker_01 );
});
</script>
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du champs de formulaire
-
class (string)
optionnal- ajoute une classe CSS au champs de formulaire (par défaut: 'form-control')
-
name (string)
required- permet de définir la valeur de l'attribut 'name' du champs du formulaire
-
type (string)
optionnal- permet de définir la valeur de l'attribut 'type' du champs du formulaire
-
size (string)
optionnal- permet d'ajouter un suffixe à la classe CSS 'form-control'
-
value (string)
optionnal- permet de définir la valeur par défaut du champs du formulaire
-
placeholder (string)
optionnal- permet de définir la valeur de l'attribut 'placeholder' du champs du formulaire
-
phoneCountry (string)
optionnal- En complément de l'attribut type à la valeur 'tel', permet de formatter le numéro de téléphone entré au format du pays. Actuellement, seul le format français est pris en charge (+33 X XX XX XX XX). (par défaut: 'FR')
-
required (boolean)
optionnal- permet d'indiquer si le champs est obligatoire (par défaut: false)
-
html5Required (boolean)
optionnal- permet d'indiquer si le champs doit utliser l'attribut html5 required (par défaut: true)
-
disabled (boolean)
optionnal- permet d'indiquer si le champs est desactivé (par défaut: false)
-
readonly (boolean)
optionnal- permet d'indiquer si le champs est lecture seule (par défaut: false)
-
pattern (string)
optionnal- permet de saisir une expression réguliére pour contrôler le champs
-
accept (string)
optionnal- permet de définir l'attribut 'accept' pour les types de fichiers du champs
-
title (string)
optionnal- permet de définir l'attribut 'title' du champs
-
maxlength (number)
optionnal- permet de saisir une limitation de taille de valeur saisie (par défaut: 0)
-
min (number)
optionnal- permet de saisir une valeur minimale pour les champs de type number (par défaut: 0)
-
max (number)
optionnal- permet de saisir une valeur maximale pour les champs de type number (par défaut: 0)
-
step (number)
optionnal- permet de saisir une valeur de step pour les champs de type number (par défaut: 0) ou time (permet de gérer la saisie en millisecondes 300 = 5 minutes) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#step )
-
title (string)
optionnal- permet de définir l'attribut 'list' du champs
-
datalistId (string)
optionnal- permet de définir l'attribut 'list' du champs
-
datalist (string)
optionnal- permet de définir la balise 'datalist' du champs
-
helpMsg (string)
optionnal- permet de définir le message d'aide du champs
-
errorMsg (string)
optionnal- permet de définir le message d'erreur du champs
-
hideErrorMsg (boolean)
optionnal- true permet de masquer le message d'erreur du champs si jamais il est afficher par exemple par le fieldset. Par défaut false.
-
params (string)
optionnal- permet d'ajouter des parametres HTML au champs de formulaire
Exemple
<@cForm>
<@cRow>
<@cCol>
<@cField label=''>
<@cInputPassword label='Mot de passe ( avec suggestion )' name='password1' passwordMeter=true pmConfirmFieldId='passwordConfirm' helpMsg='' />
</@cField>
<@cField label=''>
<@cInputPassword label='Confirmation de mot de passe' name='passwordConfirm' />
</@cField>
<hr>
<@cField label=''>
<@cInputPassword label='Mot de passe' name='password2' helpMsg='Saisissez votre mot de passe' />
</@cField>
</@cCol>
</@cRow>
</@cForm>
<form method="post">
<div class="row ">
<div class="col ">
<label class="form-label" for="password1">
Mot de passe ( avec suggestion )<span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="password1" id="password1" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#password1" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
<label class="form-label" for="passwordConfirm">
Confirmation de mot de passe<span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<p class="form-text " id="help_passwordConfirm">
Please enter your new password. It must contain at least 8 characters, and consist of at least 1 lowercase, 1 uppercase, 1 number and 1 special character.</p>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="passwordConfirm" id="passwordConfirm" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#passwordConfirm" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
<hr>
<label class="form-label" for="password2">
Mot de passe<span class="main-danger-color ms-xxs" tabindex="0" title="Mandatory">*</span>
</label>
<p class="form-text " id="help_password2">
Saisissez votre mot de passe</p>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="password2" id="password2" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#password2" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
name (string)
required- permet de définir la valeur de l'attribut 'name' du champs du formulaire
-
label (string)
required- permet de définir le libellé du champs.
-
class (string)
optionnal- ajoute une classe CSS au champs de formulaire (par défaut: 'form-control')
-
btnShowPassword (boolean)
optionnal- permet d'afficher le bouton pour afficher le mot de passe (par défaut: true)
-
passwordMeter (boolean)
optionnal- permet d'afficher les informations de force du mot de passe (par défaut: false)
-
id (string)
optionnal- l'ID du champs de formulaire
-
pmLabel (string)
optionnal- Label asssocié ua message sur la force du mot de passe. Par défaut 'Password strength : no password entered'
-
pmUrl (string)
optionnal- Url du service générant le mot de passe suggéré. Par défaut ''.
-
pmConfirmFieldId (string)
optionnal- l'ID du champs de confirmation de mot de passe.
-
rows (number)
optionnal- permet de modifier le nombre ligne du champs de formulaire, par défaut 0
-
placeholder (string)
optionnal- permet de définir la valeur de l'attribut 'placeholder' du champs du formulaire
-
autocomplete (string)
optionnal- autocomplete pour le textarea peut être on/off https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/autocomplete (defaut:'')
-
required (boolean)
optionnal- permet d'indiquer si le champs est obligatoire (par défaut: false)
-
size (string)
optionnal- permet d'indiquer si le champs doit utliser l'attribut html5 required (par défaut: true)
-
value (string)
optionnal- permet de définir la valeur par défaut du champs du formulaire
-
disabled (boolean)
optionnal- permet d'indiquer si le champs est desactivé (par défaut: false)
-
readonly (boolean)
optionnal- permet d'indiquer si le champs est lecture seule (par défaut: false)
-
title (string)
optionnal- permet de définir l'attribut 'title' du champs
-
maxlength (number)
optionnal- permet de saisir une limitation de taille de valeur saisie (par défaut: 0)
-
helpMsg (string)
optionnal- permet de définir le message d'aide du champs
-
errorMsg (string)
optionnal- permet de définir le message d'erreur du champs
-
params (string)
optionnal- permet d'ajouter des parametres HTML au champs de formulaire
Exemple
<@cForm>
<@cRow>
<@cCol>
<@cField label=''>
<@cInputTimeSlot name='creneau' legend='Choisir un créneau' helpMsg='Prendre un rendez-vous sur le créneau choisi' />
</@cField>
</@cCol>
</@cRow>
</@cForm>
<form method="post">
<div class="row ">
<div class="col ">
<fieldset id="fieldset-creneau" role="group" aria-labelledby="legend-creneau" aria-describedby="help_creneau">
<legend id="legend-creneau" >Choisir un créneau</legend>
<p class="form-text " id="help_creneau">
Prendre un rendez-vous sur le créneau choisi</p>
<div class="row ">
<div class="col-6 col-md-4 col-lg-2 ps-0 ms-xs ">
<div id="label_creneau_begin!" >
<label class="form-label visually-hidden" for="creneau_begin!">
From
</label>
<input type="time" class=" form-control" name="creneau_begin" id="creneau_begin" value="00:00" min="00:00" max="23:59">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_creneau_end!" >
<label class="form-label visually-hidden" for="creneau_end!">
To
</label>
<input type="time" class=" form-control" name="creneau_end" id="creneau_end" value="23:59" min="00:00" max="23:59">
</div>
</div>
</div>
</fieldset>
<script src="themes/skin/parisfr/js/themeparisfr.util.min.js"></script>
<script src="themes/skin/parisfr/js/plugins/forms/input-time-polyfill.y11.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const browserInfo = getBrowserInfo();
// Polyfill for IE / FF / Safari
if ( browserInfo.name.includes( 'IE') || browserInfo.name.includes('Firefox') || browserInfo.name.includes('Safari') ) {
const btnSendStep = document.querySelector('[name="action_doSaveStep"]');
const timeInputs = document.querySelectorAll('input[type="time"]');
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.classList.add('time-polyfill');
input.type = 'text';
});
// Add event listener for keydown event to handle tabbing between inputs
document.addEventListener('keydown', function( e ) {
if( e.target.classList.contains('time-polyfill') ) {
switch (e.keyCode) {
case 9:
const inputName = e.target.name;
const nextInputName = inputName.endsWith('_begin') ? inputName.replace('_begin', '_end') : inputName.replace('_end', '_begin');
const nextInput = document.querySelector(`input[name="${nextInputName}"]`);
if (nextInput) {
nextInput.focus();
}
e.stopImmediatePropagation();
break;
default:
break;
}
}
// Validate before submitting the form
if( btnSendStep != null ){
btnSendStep.on('click', function(e) {
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.value = input.value === ('--:--') ? '' : input.value;
});
});
}
});
}
});
</script>
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
name (string)
required- permet de définir la valeur de l'attribut 'name' du champs du formulaire
-
legend (string)
optionnal- permet de définir l'attribut 'legend' du fieldset
-
legendClass (string)
optionnal- ajoute une classe CSS du fieldset du champs (par défaut: '')
-
id (string)
optionnal- l'ID du champs de formulaire
-
class (string)
optionnal- ajoute une classe CSS au champs de formulaire (par défaut: '')
-
step (number)
optionnal- permet de définir du pas. Le pas est la valeur d'incrémentation ou de décrémentation de la valeur du champ. Seules les valeurs qui sont des incréments en multiple de step depuis la valeur de base (min si cet attribut est défini, value sinon, et si aucun n'est fourni, une valeur par défaut appropriée) sont valides. Pour les champs de type time, la valeur de l'attribut step est exprimée en secondes (avec un facteur de multiplication de 1000 puisque la valeur numérique sous-jacente est exprimée en millisecondes). Par défaut, la valeur de l'incrément est 60, ce qui correspond à 1 minute. Voir la documentation sur MDN (par défaut: 0 )
-
beginHour (string)
optionnal- permet de définir l'heure de début ( par défaut '00:00' )
-
endHour (string)
optionnal- permet de définir l'heure de fin ( par défaut '23:59' )
-
btnAction (string)
optionnal- permet de définir le selecteur pour le bouton de validation du formulaire. S'il est non vide, cela ajoute un trigger sur le bouton de validation du formulaire pour traitement par le polyfill. Par défaut '[name="action_doSaveStep"]',
-
autocomplete (string)
optionnal- autocomplete pour le champs voir https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/autocomplete (defaut:'')
-
html5Required (boolean)
optionnal- rend le champs obligatoire au format HTML5 (par défaut: false)
-
required (boolean)
optionnal- permet d'indiquer si le champs est obligatoire (par défaut: false)
-
disabled (boolean)
optionnal- permet d'indiquer si le champs est desactivé (par défaut: false)
-
readonly (boolean)
optionnal- permet d'indiquer si le champs est lecture seule (par défaut: false)
-
helpMsg (string)
optionnal- permet de définir le message d'aide du champs
-
errorMsg (string)
optionnal- permet de définir le message d'erreur du champs
-
params (string)
optionnal- permet d'ajouter des parametres HTML au champs de formulaire
Exemple
<@cRow>
<@cCol>
<@cLabel label='Description' for='desc' />
<@cTextArea name='desc' helpMsg='Saisir une description' rows=15 />
</@cCol>
</@cRow>
<form method="post">
<div class="row ">
<div class="col ">
<label class="form-label" for="desc">
Description
</label>
<p class="form-text " id="help_desc">
Saisir une description</p>
<textarea class=" form-control" name="desc" id="desc" rows="15" aria-describedby="help_desc">
</textarea>
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
name (string)
required- permet de définir la valeur de l'attribut 'name' du champs du formulaire
-
class (string)
optionnal- ajoute une classe CSS au champs de formulaire (par défaut: 'form-control')
-
id (string)
optionnal- l'ID du champs de formulaire
-
rows (number)
optionnal- permet de modifier le nombre ligne du champs de formulaire, par défaut 0
-
placeholder (string)
optionnal- permet de définir la valeur de l'attribut 'placeholder' du champs du formulaire
-
autocomplete (string)
optionnal- autocomplete pour le textarea peut être on/off https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/autocomplete (defaut:'')
-
required (boolean)
optionnal- permet d'indiquer si le champs est obligatoire (par défaut: false)
-
html5Required (boolean)
optionnal- permet d'indiquer si le champs doit utliser l'attribut html5 required (par défaut: true)
-
disabled (boolean)
optionnal- permet d'indiquer si le champs est desactivé (par défaut: false)
-
readonly (boolean)
optionnal- permet d'indiquer si le champs est lecture seule (par défaut: false)
-
title (string)
optionnal- permet de définir l'attribut 'title' du champs
-
maxlength (number)
optionnal- permet de saisir une limitation de taille de valeur saisie (par défaut: 0)
-
helpMsg (string)
optionnal- permet de définir le message d'aide du champs
-
errorMsg (string)
optionnal- permet de définir le message d'erreur du champs
-
hideErrorMsg (boolean)
optionnal- true permet de masquer le message d'erreur du champs si jamais il est afficher par exemple par le fieldset. Par défaut false.
-
params (string)
optionnal- permet d'ajouter des parametres HTML au champs de formulaire
Exemple
<@cRow>
<@cCol>
<@cLabel label='Mot de Passe' for='password1' />
<@cInput name='password1' type='password' />
</@cCol>
</@cRow>
<div class="row ">
<div class="col ">
<label class="form-label" for="pass">
Mot de Passe
</label>
<input type="password" class=" form-control" name="pass" id="pass" value="">
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du label
-
class (string)
optionnal- ajoute une classe CSS au label
-
label (string)
required- définit le libellé du label
-
for (string)
optionnal- permet de définir le lien entre le label et le champ, à répéter dans la Macro cInput
-
showLabel (boolean)
optionnal- permet d'afficher le label (par défaut: true)
-
required (boolean)
optionnal- permet d'indiquer si le champs est obligatoire, ajoute le libellé '(facultatif)' si false (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML au label
Exemple
<@cFormHelp id='name2' label='Saisir au moins un prénom' />
<form method="post">
<div class="row ">
<div class="col ">
<label class="form-label" for="name2">
Prénom
</label>
<p class="form-text " id="help_name2">
Saisir au moins un prénom</p>
<input type="text" class=" form-control" name="name2" id="name2" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves">
</div>
<div class="col ">
<label class="form-label" for="name2_1">
Prénom - exemple 2
</label>
<p class="form-text " id="help_name2_1">
Saisir au moins un autre prénom</p>
<input type="text" class=" form-control" name="name2_1" id="name2_1" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves" aria-describedby="help_name2_1">
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
required- l'ID du message d'aide correspondant au champs afférent
-
class (string)
optionnal- ajoute une classe CSS au message d'aide
-
label (string)
required- définit le libellé du message d'aide
-
params (string)
optionnal- permet d'ajouter des parametres HTML au message d'aide
Cette macro est aussi appelée dans la macro cInput par le paramètre "helpMsg" qui s'il est rempli affiche le message d'aide comme dans l'exemple 2
Exemple
<@cForm>
<@cRow>
<@cCol>
<@cLabel label='Prénom' for='name4' />
<@cFormError id='name4' label='Erreur avec formError' />
<@cInput name='name4' type='text' placeholder='Exemple: Jean Yves' id='formError' class='form-control is-invalid' />
</@cCol>
<@cCol>
<@cLabel label='Prénom - exemple 2' for='name4_1' />
<@cInput name='name4_1' type='text' placeholder='Exemple: Jean Yves' id='formError' class='form-control is-invalid' helpMsg='Erreur affichée avec la macro cFormError mais passé en paramètre de l\'input' errorMsg='Erreur dans input !' />
</@cCol>
</@cRow>
</@cForm>
<form method="post">
<div class="row ">
<div class="col ">
<label class="form-label" for="name4">
Prénom
</label>
<p class="invalid-feedback" id="error_name4">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Erreur avec formError</p>
<input type="text" class=" form-control is-invalid" name="name4" id="formError" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves">
</div>
<div class="col ">
<label class="form-label" for="name4_1">
Prénom - exemple 2
</label>
<p class="form-text " id="help_formError">
Erreur affichée avec la macro cFormError mais passé en paramètre de l'input</p>
<p class="invalid-feedback" id="error_formError">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Erreur dans input !</p>
<input type="text" class=" form-control is-invalid is-invalid" name="name4_1" id="formError" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves" aria-invalid="true" aria-describedby="error_formError">
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
required- l'ID du message d'erreur correspondant au champs afférent
-
class (string)
optionnal- ajoute une classe CSS au message d'erreur
-
label (string)
required- définit le libellé du message d'erreur
-
params (string)
optionnal- permet d'ajouter des parametres HTML au message d'erreur
Cette macro est aussi appelée dans la macro cInput par le paramètre "errorMsg" qui s'il est rempli affiche le message d'erreur comme dans l'exemple 2
Exemple
Information exemple
<@cRow>
<@cCol>
<@cLabel label='Quantité' for='quantity' />
<@cQuantityPicker name='quantity' minQty='0' maxQty='10' helpMsg='Information exemple' />
</@cCol>
</@cRow>
<div class="row ">
<div class="col ">
<label class="form-label" for="quantity">
Quantité
</label>
<p class="form-text " id="help_quantity">
Information exemple</p>
<div class="quantity-picker ">
<label class="form-label visually-hidden" for="quantity">
Choisir une quantité
</label>
<div class="input-group w-auto">
<button class="btn btn-light quantity-btn decrement-quantity" type="submit"aria-label="Retirer une unité" data-direction="-1">
<span class="btn-label ">−</span>
</button>
<input type="number" class=" form-control quantity-input" name="quantity" id="quantity" value="0" data-min="0" data-max="10" >
<button class="btn btn-light quantity-btn increment-quantity" type="submit"aria-label="Ajouter une unité" data-direction="1">
<span class="btn-label ">+</span>
</button>
</div>
</div>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
document.addEventListener( 'click', function(ev) {
if ( ev.target.classList.contains('quantity-btn') ) {
const parentDiv = ev.target.closest('.quantity-picker');
const input = parentDiv.querySelector('input[name="quantity"]');
const currentQty = parseInt(input.value);
const qtyDirection = parseInt(ev.target.getAttribute("data-direction"));
let newQty = currentQty + qtyDirection;
let minQty = parseInt(input.getAttribute("data-min"));
let maxQty = parseInt(input.getAttribute("data-max"));
newQty = Math.max(minQty, Math.min(maxQty, newQty));
parentDiv.querySelector(".decrement-quantity").disabled = (newQty === minQty);
parentDiv.querySelector(".increment-quantity").disabled = (newQty === maxQty);
input.value = newQty;
}
});
document.addEventListener("blur", function(ev) {
if ( ev.target.name ==='quantity') {
const input = ev.target;
const parentDiv = input.closest('.quantity-picker');
let minQty = parseInt(input.getAttribute("data-min"));
if (input.value.trim() === "") {
input.value = minQty;
parentDiv.querySelector(".decrement-quantity").disabled = true;
}
}
}, true);
});
</script>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
name (string)
required- permet de définir la valeur de l'attribut 'name' du champs
-
minQty (number)
optionnal- permet de définir la valeur minimal selectionnable par l'utilisateur (par défaut: 0)
-
maxQty (number)
optionnal- permet de définir la valeur maximale selectionnable par l'utilisateur (par défaut: 10)
-
disabled (boolean)
optionnal- permet d'indiquer si le champs est desactivé (par défaut: false)
-
helpMsg (string)
optionnal- permet de définir le message d'aide du champs
-
errorMsg (string)
optionnal- permet de définir le message d'erreur du champs
-
hideErrorMsg (boolean)
optionnal- true permet de masquer le message d'erreur du champs si jamais il est afficher par exemple par le fieldset. Par défaut false.
-
params (string)
optionnal- permet d'ajouter des parametres HTML au champ
Exemple
<@cForm>
<@cRow>
<@cCol class='2'>
<@cLabel label='Tarif' for='tarif' />
<@cInputGroup>
<@cInput name='tarif' value='15' />
<@cInputGroupAddon addonText='€' params='aria-label="Devise en euros"'/>
</@cInputGroup>
</@cCol>
</@cRow>
<@cRow>
<@cCol class='8'>
<@cLabel label='Mot de passe' for='pass2' />
<@cInputGroup>
<@cInput name='pass2' type='password' value='Ajoho56' />
<@cInputGroupAddon class='toggle-password'>
<@cInputGroupAddonText tag='div' params='aria-label="Voir le mot de passe"'>
<@parisIcon 'eye' 'Mot de Passe' />
</@cInputGroupAddonText>
</@cInputGroupAddon>
</@cInputGroup>
</@cCol>
</@cRow>
<@cRow>
<@cCol class='8'>
<@cLabel label='Recherche' for='search' />
<@cInputGroup>
<@cInput name='search' value='' placeholder='Rechercher une adresse' />
<@cBtn label='Rechercher' class='primary'>
<@parisIcon 'check' />
</@cBtn>
</@cInputGroup>
</@cCol>
</@cRow>
<@cRow>
<@cCol class='8'>
<@cLabel label='Label exemple' for='exemple' />
<@cFormHelp id='field' label='Information exemple' />
<@cInputGroup>
<@cInput name='exemple' value='' placeholder='Texte exemple' />
<@cInputGroupAddon>
<@cBtn label='Texte exemple' class='primary' />
</@cInputGroupAddon>
</@cInputGroup>
</@cCol>
</@cRow>
</@cForm>
<form method="post">
<div class="row ">
<div class="col 2">
<label class="form-label" for="tarif">
Tarif
</label>
<div class="input-group">
<input type="text" class=" form-control" name="tarif" id="tarif" value="15">
<span class="input-group-text" aria-label="Devise en euros">
€</span>
</div>
</div>
</div>
<div class="row ">
<div class="col 8">
<label class="form-label" for="pass2">
Mot de passe
</label>
<div class="input-group">
<input type="password" class=" form-control" name="pass2" id="pass2" value="Ajoho56" aria-describedby="help_pass">
<div class="input-group-text" aria-label="Voir le mot de passe">
<svg class="paris-icon paris-icon-eye"data-mce-svg="paris-icon paris-icon-eye" focusable="false" role="img">
<use href="#paris-icon-eye"></use>
</svg></div>
</div>
</div>
</div>
<div class="row ">
<div class="col 8">
<label class="form-label" for="search">
Recherche
</label>
<div class="input-group">
<input type="text" class=" form-control" name="search" id="search" value="" placeholder="Rechercher une adresse" aria-label="Rechercher une adresse">
<button class="btn btn-primary" type="submit">
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-check"></use>
</svg><span class="btn-label ">Rechercher</span>
</button>
</div>
</div>
</div>
<div class="row ">
<div class="col 8">
<label class="form-label" for="exemple">
Label exemple
</label>
<p class="form-text " id="help_field">
Information exemple</p>
<div class="input-group">
<input type="text" class=" form-control" name="exemple" id="exemple" value="" placeholder="Texte exemple" aria-label="Texte exemple">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Texte exemple</span>
</button>
</div>
</div>
</div>
</form>Paramètres
Les paramètres pour cInputGroup
-
id (string)
optionnal- l'ID du groupe
-
class (string)
optionnal- ajoute une classe CSS au groupe
-
params (string)
optionnal- permet d'ajouter des parametres HTML au groupe
Les paramètres pour cInputGroupAddon
-
id (string)
optionnal- l'ID de l'addon
-
class (string)
optionnal- ajoute une classe CSS à l'addon
-
append (string)
optionnal- si true, ajoute un suffixe 'append' à la classe CSS du groupe. Si false, ajoute le suffixe prepend (par défaut: true)
-
addonText (string)
optionnal- ajoute un texte à l'addon
-
params (string)
optionnal- permet d'ajouter des parametres HTML à l'addon
Les paramètres pour cInputGroupAddonText
-
id (string)
optionnal- l'ID de l'addon
-
class (string)
optionnal- ajoute une classe CSS à l'addon
-
tag (string)
optionnal- définit la balise du texte ajouté au groupe (par défaut: 'span')
-
params (string)
optionnal- permet d'ajouter des parametres HTML l'addon
Exemple
<@cRow>
<@cCol cols='3'>
<@cLabel label='Date' for='datepicker_10' />
<@cInputDate id='datepicker_10' label='' name='date1' value=.now?date?iso_utc />
</@cCol>
<@cCol cols='3'>
<@cLabel label='Date sans icone' for='datepicker_20' />
<@cInputDate id='datepicker_20' label='' name='date2' icon=false />
</@cCol>
</@cRow>
<div class="row ">
<div class="col-3 ">
<label class="form-label" for="datepicker_10">
Date
</label>
<!-- Warning : wrong or deprecated argument(s) : label, ... -->
<div class="input-group">
<input type="text" class=" form-control" name="date1" id="datepicker_10" value="2025-10-25">
<span class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></span>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const elemdatepicker_10 = document.querySelector('#datepicker_10')
const dtOptionsdatepicker_10 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_10 = new themeParisFrDatepicker( elemdatepicker_10, dtOptionsdatepicker_10 );
});
</script>
</div>
<div class="col-3 ">
<label class="form-label" for="datepicker_20">
Date sans icone
</label>
<!-- Warning : wrong or deprecated argument(s) : label, ... -->
<div class="input-group">
<input type="text" class=" form-control" name="date2" id="datepicker_20" value="">
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const elemdatepicker_20 = document.querySelector('#datepicker_20')
const dtOptionsdatepicker_20 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_20 = new themeParisFrDatepicker( elemdatepicker_20, dtOptionsdatepicker_20 );
});
</script>
</div>
</div>Paramètres
-
name (string)
required- permet de définir le name du champ
-
label (string)
required- permet de définir le label du champ
-
id (string)
optionnal- permet de définir l'id du champ
-
class (string)
optionnal- permet de définir les class CSS du champ (default:'')
-
type (string)
optionnal- permet de définir le type du champ (default:'datepicker'. Choix possibles: 'datepicker' ou 'date')
-
icon (boolean)
optionnal- permet de définir l'icon du champ (default:true)
-
options (object)
optionnal- permet de définir les options du champ (default:{})
- autohide: customOptions.autohide || true,
- buttonClass: customOptions.btn ||'btn',
- dataFormat: customOptions.dataFormat || dataFormat,
- dateDelimiter: customOptions.autohide || '|', // Delimiter for mutlidate
- daysOfWeekDisabled: [0,6],
- defaultViewDate: 'today',
- clearButton: true,
- enableReadOnly: true,
- format: customOptions.showFormat || showFormat,
- language: browserLang,
- minDate: null,
- maxDate: null,
- maxNumberOfDate: 1,
- nextArrow: '${customArrows[1]}',
- orientation: 'auto',
- prevArrow: '${customArrows[0]}',
- picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
- showDaysOfWeek: true,
- showOnClick: true,
- showOnFocus: true,
- startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
- title: '',
- todayButton: false,
- todayButtonMode: 0, // 0 - Focus , 1 - Select
- todayHighlight: true,
- updateOnBlur: true,
- weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
- weekStart: 1,
-
value (string)
optionnal- permet de définir la valeur du champ (default:'')
-
placeholder (string)
optionnal- permet de définir le placeholder du champ (default:'')
-
required (boolean)
optionnal- permet de définir champ en required (default:false)
-
disabled (boolean)
optionnal- permet de desactiver le champ (default:false)
-
readonly (boolean)
optionnal- permet de définir le champ en readonly (default:false)
-
helpMsg (string)
optionnal- permet de définir le message d'aide du champ (default:'')
-
errorMsg (string)
optionnal- permet de définir le message d'erreur du champ (default:'')
-
params (string)
optionnal- permet de définir les paramètres HTML du champ (default:'') default ''
-
#nested (string)
optionnal- Tous contenu
La librairie utilisée est Vanilla JS Datepicker
La macro cInputDate permet de générer un champ avec un date picker. Il est possible d'utiliser un champ de type "date" HTML5 en modifiant le type par default 'datepicker' en "date"
La macro <@cInputDate /> initialise et affiche le date picker avec le chargement des fichiers nécessaires.
Configurable en BO
Les options peuvent être surchargée pour tous le site, dans les propriétés du site. Il s'agit de mettre les options de VanillaJS Datepicker dans le champs "Configuration par déaut du date picker".Une option de configurations du date picker doit être libellée sous forme de texte (clé : valeur) séparé par des virgules.
Par exemple: daysOfWeekDisabled: [0,6], etc...
DEPRECATED
Cette façon de faire est toujours possible mais il est conseillé d'utiliser la macro cInputDate décrite ci-dessus
Le champ avec date picker est l'utilisation de deux macro avec une macro "cInput" dans un input group, macro "cInputGroup". La librairie utilisée est vanillajs-datepicker
Les macros
La macro <@initThemeDatePicker /> initialise le date picker avec le chargement des fichiers nécessaires.
La macro <@getThemeDatePicker idField='datepickerflat' /> va charger le datepicker avec l'input dont l'id est passé en paramètre -idField-
Les paramètres de <@getThemeDatePicker idField='datepickerflat' />
- idField (string) (obligatoire) : Identifiant unique
-
showFormat (string) (default :'')
optionnal- Format d'affichage de type 'dd/mm/yyyy' voir la doc vanillajs-datepicker
-
mindate (string) (default : '')
optionnal- Date minimum sélectionnable le datepicker
-
maxdate (string) (default : '')
optionnal- Date maximum sélectionnable le datepicker
-
defaultDate (string) (default : '')
optionnal- Date sélectionnée par défaut dans le datepicker
-
mode (string) (default :'single')
optionnal- Valeur par défaut
-
time (boolean) (default : false)
optionnal- Indique si le champs est en lecture seule.
-
maxlength ( int / default : 0)
optionnal- Permet de saisir une limitation de taille de valeur saisie
-
range (string) (default :'')
optionnal- Message d'aide
-
rangeIdField (string)
required- Identifiant unique, égal
- customArrows ( Array ) ( default : ',' : Flèches en SVG )
Exemple
<@cRow>
<@cCol cols='12 col-lg-4'>
<@cLabel label='Date Range' for='dtRange' />
<@cInputDateRange id='dtRange' name='dateRange' />
</@cCol>
<@cCol cols='12 col-lg-4'>
<@cLabel label='Range sans icône' for='dtRange3' />
<@cInputDateRange id='dtRange3' name='dateRange2' icon=false />
</@cCol>
<@cCol cols='12 col-lg-4'>
<@cLabel label='Range avec label' for='dtRange2' />
<@cInputDateRange id='dtRange2' label=['Début','Fin'] name='dateRange2' />
</@cCol>
</@cRow>
<form method="post">
<div class="row ">
<div class="col-12 col-lg-4 ">
<label class="form-label" for="dtRange">
Date Range
</label>
<div class="daterange " id="dtRange">
<label class="form-label visually-hidden" for="dtRange_range_start">
#i8n{themeparisfr.labelDateStart}
</label>
<label class="form-label visually-hidden" for="dtRange_range_end">
#i8n{themeparisfr.labelDateEnd}
</label>
<div class="input-group">
<input type="text" class=" form-control" name="dateRange" id="dtRange_range_start" value="">
<input type="text" class=" form-control" name="dateRange_range_end" id="dtRange_range_end" value="">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|', // Delimiter for mutlidate
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeOptionsdtRange = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRange = document.getElementById( 'dtRange' );
const rangepickerdtRange = new DateRangePicker( elDtPickerWrapperdtRange, dtRangeOptionsdtRange);
rangepickerdtRange.inputs.forEach((input) => {
let isoInput = null;
input.addEventListener('changeDate', (ev) => {
const {date} = ev.detail;
const dtIso = `${date.toISOString()}`;
if( isoInput === null ){
isoInput = input.cloneNode(true);
input.removeAttribute('name');
isoInput.type = 'hidden';
isoInput.id = input.id + '_hidden';
elDtPickerWrapperdtRange.append( isoInput );
}
isoInput.value = dtIso ;
});
});
});
</script>
</div>
<div class="col-12 col-lg-4 ">
<label class="form-label" for="dtRange3">
Range sans icône
</label>
<div class="daterange " id="dtRange3">
<label class="form-label visually-hidden" for="dtRange3_range_start">
#i8n{themeparisfr.labelDateStart}
</label>
<label class="form-label visually-hidden" for="dtRange3_range_end">
#i8n{themeparisfr.labelDateEnd}
</label>
<p class="form-text " id="help_dtRange3">
Aide date range</p>
<div class="input-group">
<input type="text" class=" form-control" name="dateRange2" id="dtRange3_range_start" value="">
<input type="text" class=" form-control" name="dateRange2_range_end" id="dtRange3_range_end" value="">
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|', // Delimiter for mutlidate
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeOptionsdtRange3 = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRange3 = document.getElementById( 'dtRange3' );
const rangepickerdtRange3 = new DateRangePicker( elDtPickerWrapperdtRange3, dtRangeOptionsdtRange3);
rangepickerdtRange3.inputs.forEach((input) => {
let isoInput = null;
input.addEventListener('changeDate', (ev) => {
const {date} = ev.detail;
const dtIso = `${date.toISOString()}`;
if( isoInput === null ){
isoInput = input.cloneNode(true);
input.removeAttribute('name');
isoInput.type = 'hidden';
isoInput.id = input.id + '_hidden';
elDtPickerWrapperdtRange3.append( isoInput );
}
isoInput.value = dtIso ;
});
});
});
</script>
</div>
<div class="col-12 col-lg-4 ">
<label class="form-label" for="dtRange2">
Range avec label
</label>
<div class="daterange " id="dtRange2">
<label class="form-label" for="dtRange2_range_start">
Début
</label>
<label class="form-label ms-xl ps-xxs" for="dtRange2_range_end">
Fin
</label>
<div class="input-group">
<input type="text" class=" form-control" name="dateRange2" id="dtRange2_range_start" value="">
<input type="text" class=" form-control" name="dateRange2_range_end" id="dtRange2_range_end" value="">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|', // Delimiter for mutlidate
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeOptionsdtRange2 = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRange2 = document.getElementById( 'dtRange2' );
const rangepickerdtRange2 = new DateRangePicker( elDtPickerWrapperdtRange2, dtRangeOptionsdtRange2);
rangepickerdtRange2.inputs.forEach((input) => {
let isoInput = null;
input.addEventListener('changeDate', (ev) => {
const {date} = ev.detail;
const dtIso = `${date.toISOString()}`;
if( isoInput === null ){
isoInput = input.cloneNode(true);
input.removeAttribute('name');
isoInput.type = 'hidden';
isoInput.id = input.id + '_hidden';
elDtPickerWrapperdtRange2.append( isoInput );
}
isoInput.value = dtIso ;
});
});
});
</script>
</div>
</div>
</form>Paramètres
-
name (string)
required- permet de définir le name du champ
-
label (string)
required- permet de définir le label du champ
-
id (string)
optionnal- permet de définir l'id du champ
-
class (string)
optionnal- permet de définir les class CSS du champ (default:'')
-
type (string)
optionnal- permet de définir le type du champ (default:'datepicker'. Choix possibles: 'datepicker' ou 'date')
-
icon (boolean)
optionnal- permet de définir l'icon du champ (default:true)
-
options (object)
optionnal- permet de définir les options du champ (default:{})
- autohide: customOptions.autohide || true,
- buttonClass: customOptions.btn ||'btn',
- dataFormat: customOptions.dataFormat || dataFormat,
- dateDelimiter: customOptions.autohide || '|', // Delimiter for mutlidate
- daysOfWeekDisabled: [0,6],
- defaultViewDate: 'today',
- clearButton: true,
- enableReadOnly: true,
- format: customOptions.showFormat || showFormat,
- language: browserLang,
- minDate: null,
- maxDate: null,
- maxNumberOfDate: 1,
- nextArrow: '${customArrows[1]}',
- orientation: 'auto',
- prevArrow: '${customArrows[0]}',
- picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
- showDaysOfWeek: true,
- showOnClick: true,
- showOnFocus: true,
- startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
- title: '',
- todayButton: false,
- todayButtonMode: 0, // 0 - Focus , 1 - Select
- todayHighlight: true,
- updateOnBlur: true,
- weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
- weekStart: 1,
-
value (string)
optionnal- permet de définir la valeur du champ (default:'')
-
placeholder (string)
optionnal- permet de définir le placeholder du champ (default:'')
-
required (boolean)
optionnal- permet de définir champ en required (default:false)
-
disabled (boolean)
optionnal- permet de desactiver le champ (default:false)
-
readonly (boolean)
optionnal- permet de définir le champ en readonly (default:false)
-
helpMsg (string)
optionnal- permet de définir le message d'aide du champ (default:'')
-
errorMsg (string)
optionnal- permet de définir le message d'erreur du champ (default:'')
-
params (string)
optionnal- permet de définir les paramètres HTML du champ (default:'') default ''
-
#nested (string)
optionnal- Tous contenu
La librairie utilisée est Vanilla JS Datepicker
La macro cInputDateRange permet de générer un champ avec un date picker. Il est possible d'utiliser un champ de type "date" HTML5 en modifiant le type par default 'datepicker' en "date"
La macro <@cInputDate /> initialise et affiche le date picker avec le chargement des fichiers nécessaires.
Configurable en BO
Les options peuvent être surchargée pour tous le site, dans les propriétés du site. Il s'agit de mettre les options de VanillaJS Datepicker dans le champs "Configuration par déaut du date picker".Une option de configurations du date picker doit être libellée sous forme de texte (clé : valeur) séparé par des virgules.
Par exemple: daysOfWeekDisabled: [0,6], etc...
DEPRECATED
Cette façon de faire est toujours possible mais il est conseillé d'utiliser la macro cInputDate décrite ci-dessus
Le champ avec date picker est l'utilisation de deux macro avec une macro "cInput" dans un input group, macro "cInputGroup". La librairie utilisée est vanillajs-datepicker
Les macros
La macro <@initThemeDatePicker /> initialise le date picker avec le chargement des fichiers nécessaires.
La macro <@getThemeDatePicker idField='datepickerflat' /> va charger le datepicker avec l'input dont l'id est passé en paramètre -idField-
Les paramètres de <@getThemeDatePicker idField='datepickerflat' />
- idField (string) (obligatoire) : Identifiant unique
-
showFormat (string) (default :'')
optionnal- Format d'affichage de type 'dd/mm/yyyy' voir la doc vanillajs-datepicker
-
mindate (string) (default : '')
optionnal- Date minimum sélectionnable le datepicker
-
maxdate (string) (default : '')
optionnal- Date maximum sélectionnable le datepicker
-
defaultDate (string) (default : '')
optionnal- Date sélectionnée par défaut dans le datepicker
-
mode (string) (default :'single')
optionnal- Valeur par défaut
-
time (boolean) (default : false)
optionnal- Indique si le champs est en lecture seule.
-
maxlength ( int / default : 0)
optionnal- Permet de saisir une limitation de taille de valeur saisie
-
range (string) (default :'')
optionnal- Message d'aide
-
rangeIdField (string)
required- Identifiant unique, égal
- customArrows ( Array ) ( default : ',' : Flèches en SVG )
Exemple
Attention
Cette macro nécessite le plugin AsynchronousUpload pour fonctionner !
Attention
Pas d'upload possible sur la démo
<@cForm>
<@cTitle level=4 class='main-info-color'>Zone de drop de fichiers</@cTitle>
<@cRow>
<@cCol>
<@cInputDropFiles name='files_domicile' required=true id='domicile' nbFiles=10 handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} formSubmitButtonName='doSaveForm' helpMsg='Télécharger vos fichiers !' />
</@cCol>
</@cRow>
<@cTitle level=4 class='main-info-color'>Zone + liste de fichiers upload</@cTitle>
<@cRow>
<@cCol>
<@cInputDropFiles name='files_domicile' id='domicile2' nbFiles=2 nbUplodadedFiles=2 handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} hasFiles=true formSubmitButtonName='doSaveForm'>
<@cInputDropFilesItem name='files_domicile2' label='Mon attestation.docx' idx=1 handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} fileSize=3000 ext='DOCX' urlDl='javascript:return false;' urlRm='javascript:return false;' />
<@cInputDropFilesItem name='files_domicile3' label='Justificatif.docx' idx=1 handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} fileSize=60 ext='DOCX' urlDl='javascript:return false;' urlRm='javascript:return false;' />
</@cInputDropFiles>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cField>
<@cBtn label='Valider' class='action' id="doSaveForm"/>
<@cBtn label='Annuler' class='link-action'>
<@parisIcon name='close' />
</@cBtn>
</@cField>
</@cCol>
</@cRow>
</@cForm>
<div class="alert alert-outline alert-warning" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-1454222501600961" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-1454222501600961">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Attention</p>
</div>
</div>
<div class="alert-content">
Cette macro nécessite le plugin <a class="font-weight-bold mx-xs" href="https://github.com/lutece-platform/lutece-tech-plugin-asynchronousupload"><small><strong>AsynchronousUpload</strong></small></a> pour fonctionner !
<!-- Si vous utilisez une librairie autre que JQuery FileUpload inclue dans le plugin, il vous faudra modifier le HTML et ajouter le javascript nécessaire. -->
</div>
</div>
<script src="js/plugins/asynchronousupload/config.js"></script>
<script>
/* Maps to manage files field errors */
var mapFileErrors = new Map();
var mapFilesNumber = new Map();
var mapFilesNumber = new Map();
</script>
<script src="jsp/site/plugins/asynchronousupload/GetMainUploadJs.jsp?handler=formsAsynchronousUploadHandler" ></script>
<div id="liveFileToastContainer" class="toast-container position-fixed p-3 top-0 end-0" style="position-fixed">
<div id="liveFileToast" class="toast" role="alert" data-autohide="true" data-delay="2000" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Attention</strong>
<button type="button" class="ms-auto btn-close" data-bs-dismiss="toast" aria-label="Close">×</button>
</div>
<div class="toast-body">
Pas d'upload possible sur la démo
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Récupérer le conteneur spécifique par son identifiant
var container = document.getElementById('liveFileToastContainer');
var toastElList = [].slice.call(container.querySelectorAll('.toast'));
var option = { delay: 0, animation: true, autohide: false };
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl, option);
});
});
</script>
<form method="post">
<h4 class="main-info-color">
Zone de drop de fichiers</h4>
<div class="row ">
<div class="col ">
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="group-files dropzone ">
<div class="col">
<label id="lbdomicile" class="" for="domicile">Upload files <span class="main-danger-color" tabindex="0" title="Mandatory">*</span></label>
<p class="form-text " id="help_domicile">
Télécharger vos fichiers !</p>
<div id="group-domicile" class="d-flex align-items-center file-input">
<input type="file" class="form-control my-xs is-required formsAsynchronousUploadHandler"aria-required="true" aria-describedby="help_domicile" data-nbuploadedfiles="0" name="files_domicile" id="domicile" multiple="multiple" data-nof="10">
<svg class="paris-icon paris-icon-upload white-color" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-upload"></use>
</svg>
<p class="flex-1 text-start ms-xs my-0">Drop your files here or <span class="main-info-color text-underline">Select</span></p>
</div>
<div id="_file_error_box_domicile"></div>
<div id="progress_domicile" class="progress mt-sm" style="display:none;">
<div id="progress-bar_domicile" class="progress-bar progress-bar-success progress-bar-striped"></div>
</div>
<div class="form-files-group" id="_file_deletion_label_domicile" style="display:none;">
<ul id="_file_deletion_domicile" class="files-group">
</ul>
</div>
</div>
</div>
</div>
</div>
<h4 class="main-info-color">
Zone + liste de fichiers upload</h4>
<div class="row ">
<div class="col ">
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="group-files dropzone no-file">
<div class="col">
<label id="lbdomicile2" class="" for="domicile2">Upload files</label>
<div id="group-domicile2" class="d-flex align-items-center file-input">
<input type="file" class="form-control my-xs formsAsynchronousUploadHandler" data-nbuploadedfiles="2" name="files_domicile" id="domicile2" multiple="multiple" data-nof="2">
<svg class="paris-icon paris-icon-upload white-color" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-upload"></use>
</svg>
<p class="flex-1 text-start ms-xs my-0">Drop your files here or <span class="main-info-color text-underline">Select</span></p>
</div>
<div id="_file_error_box_domicile2"></div>
<div id="progress_domicile2" class="progress mt-sm" style="display:none;">
<div id="progress-bar_domicile2" class="progress-bar progress-bar-success progress-bar-striped"></div>
</div>
<div class="form-files-group" id="_file_deletion_label_domicile2">
<ul id="_file_deletion_domicile2" class="files-group">
<li class="files-item" id="_file_uploaded_files_domicile21">
<label class="files-item-label" for="_form_upload_checkbox_files_domicile21">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=files_domicile2&field_index=1&fileName=Mon attestation.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" title="Download Mon attestation.docx" data-type="DOCX" data-img="">
<span class="file-item-label">Mon attestation.docx</span>
<span class="file-item-info">3 Ko</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_files_domicile21" fieldName="files_domicile2" handlerName="formsAsynchronousUploadHandler" index="1" title="Delete Mon attestation.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
<li class="files-item" id="_file_uploaded_files_domicile31">
<label class="files-item-label" for="_form_upload_checkbox_files_domicile31">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=files_domicile3&field_index=1&fileName=Justificatif.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" title="Download Justificatif.docx" data-type="DOCX" data-img="">
<span class="file-item-label">Justificatif.docx</span>
<span class="file-item-info">60 o</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_files_domicile31" fieldName="files_domicile3" handlerName="formsAsynchronousUploadHandler" index="1" title="Delete Justificatif.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<button class="btn btn-action" type="submit" id="doSaveForm">
<span class="btn-label ">Valider</span>
</button>
<button class="btn btn-link-action" type="submit">
<svg class="paris-icon paris-icon-close"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg><span class="btn-label ">Annuler</span>
</button>
</div>
</div>
</form>
<script>
document.addEventListener( 'DOMContentLoaded', function(){
const filesSelector = document.querySelectorAll('[name="files_domicile"]');
filesSelector.forEach( f => f.addEventListener('click', function(event) {
event.preventDefault();
// Show toast using Bootstrap 5 vanilla JS
const toastElement = document.getElementById('liveFileToast');
if (toastElement) {
const toast = new bootstrap.Toast(toastElement);
toast.show();
}
})
)
});
</script>Paramètres
Voici la liste des différents paramètres de la macro :
cInputDropFile name handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} class='' id='' labelSelect='Sélectionner' labelSubmit='Transmettre' labelDelete='Supprimer' required=false disabled=false helpMsg='' errorMsg='' params=''
-
name (string)
required- Attribut name du champs
-
handler (json/text)
optionnal- Handler pour les champs
-
type (string) ('dropzone' / 'dropzone' | 'button')
optionnal- Type d'upload par défaut 'dropzone', zone d'upload ou sinon 'button'.
-
nbFiles (number) (default : 0)
optionnal- Modifie l'affichage en fonction du nombre de fichiers. Si supérieur à 1 affiche une zone a deux colonnes.
-
nbUplodadedFiles (number) (default : 0)
optionnal- Nombre de fichiers déjà uploadé. New
-
maxFileSize (number) (default : 0)
optionnal- Taille maximum des fichiers à uploader. Si 0 pas de limite spécifique sur le champs mais la limite par défaut du site sera appliquée.
-
unit (string) (default : '')
optionnal- Unité de poids choisie par exemple "Mo"
-
accept ( liste text / default : '')
optionnal- Format-s- de fichier accepté-s-.
-
label (string) (default : 'Upload files')
optionnal- Titre de la zone d'upload des fichiers
-
showLabel (number) (default : '')
optionnal- Affiche ou pas le titre de la zone d'upload
-
labelPos (number) (default : 1)
optionnal- Zone d'affichage du label, par défaut dans la prémière colonne.
-
labelSelect (string) (default : 'Select')
optionnal- "Supprimer" valeur définie dans le fichier "themeparisfr_messages_fr.properties".
-
labelSubmit (string) (default : 'Submit' )
optionnal- "Sélectionner" valeur définie dans le fichier "themeparisfr_messages_fr.properties".
-
formSubmitButtonName (string) (default : 'action_doSaveStep' )
optionnal- nom du bouton submit pour le form, utilisé dans le js pour associer les validation nécessaires avant la validation.
-
labelDelete (string) (default : 'Delete' )
optionnal- "Transmettre" valeur définie dans le fichier "themeparisfr_messages_fr.properties".
-
required (boolean) (default : false)
optionnal- Indique si le champs est obligatoire.
-
disabled (boolean) (default : false)
optionnal- Indique si le champs est désactivé.
-
multiple (boolean) (default : true)
optionnal- Ajoute l'attribut "multiple" au champs d'upload.
-
noJs (boolean) (default : false)
optionnal- Ajoute l'attribut "nojs" au bouton de suppression multiple.
-
helpMsg (string) (default :'')
optionnal- Message d'aide
-
hasFiles (boolean) (default : false)
optionnal- Si true affiche la liste de fichiers.
-
errorMsg (string) (default :'')
optionnal- Message d'erreur.
-
id (string) (default :'')
optionnal- Identifiant unique, égal é l'attribut name si non renseigné
-
class (string) (default : '')
optionnal- On peut ajouter une ou des classe-s- séparées par un espace.
-
params (string) (default :'')
optionnal- Tout autre attribut HTML
Fichier uploadé New
Voici la liste des différents paramètres de la macro :
-
name (string)
required- Attribut name du champs, si le handler ne porte pas le nom
-
idx (string)
required- Index au champs.
-
label (string)
required- label associé au champs.
-
handler (json/text)
optionnal- Handler pour les champs
-
fileSize (number) (default : 0)
optionnal- Taille du fichier uploadé, en octet.
-
ext (string) (default : '')
optionnal- Extension du fihier
-
unit (string) (default : '')
optionnal- Unité de poids choisie par exemple "Mo"
-
urlDl (string) (default : '')
optionnal- Url de téléchargement du fichier, si le handler ne porte pas l'url
-
urlRm (string) (default : '')
optionnal- Url de suppression du fichier, si le handler ne porte pas l'url
-
maxChars (number) (default : 24)
optionnal- Nombre de caractères max pour afficher le nom du fichier
-
class (string) (default : '')
optionnal- Nom d'une ou des classe-s- séparées par un espace.
Exemple
<@cForm>
<@cRow>
<@cCol>
<@cField label='Yes or No ?' params='role="radiogroup" aria-describedby="help_radioHelp"'>
<!-- Inline -->
<@cFormHelp id='radioHelp' class='mb-m' label='Radio Help' />
<@cRadio name='rRadio' label='Yes' value='1' />
<@cRadio name='rRadio' label='No' value='2' />
<@cRadio name='rRadio' label='Disabled' value='3' disabled=true />
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cField label='Yes or No Invalid ?' params='role="radiogroup" aria-describedby="help_radioHelp2"'>
<!-- Inline -->
<@cFormHelp id='radioHelp2' class='mb-m' label='Radio Help' />
<@cRadio name='rRadio' label='Yes' value='1' />
<@cRadio name='rRadio' label='No' value='4' errorMsg='Une erreur s\'est produite !' />
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<!-- Column -->
<@cRow>
<@cCol>
<@cFieldset legend='Ok or Nok ?' params='role="radiogroup" aria-describedby="help_radioHelp3"'>
<@cFormHelp id='radioHelp3' label='Radio Ok Nok Help' class='mb-m' />
<@cRadio name='oknok' id='ok' label='Ok' value='1' inline=true />
<@cRadio name='oknok' id='nok' label='Nok' value='2' inline=true />
</@cFieldset>
</@cCol>
</@cRow>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cField label='Quel est votre choix ?' params='role="radiogroup" aria-describedby="help_radioHelpSelection"'>
<@cFormHelp id='radioHelpSelection' label='Radio Help' class='mb-m' />
<!-- Selection button -->
<@cRadio name='selectionRadio' label='Choix numéro 1' value='1' selectionButton=true selectionLabel='Sous-titre d'explication' >
<@cRow>
<@cCol>
<@cLabel label='Nom' for='name3' />
<@cInput name='name3' type='text' value='Dupont' helpMsg='Saisir mon nom' />
</@cCol>
<@cCol>
<@cLabel label='Prénom' for='surname3' />
<@cInput name='surname3' type='text' placeholder='Exemple: Jean Yves' helpMsg='Saisir mon prénom' />
</@cCol>
</@cRow>
</@cRadio>
<@cRadio name='selectionRadio' label='Choix numéro 2' value='2' selectionButton=true selectionLabel='Sous-titre d'explication' >
<@cRow>
<@cCol>
<@cLabel label='Nom' for='name4' />
<@cInput name='name4' type='text' value='Dupont' helpMsg='Saisir mon nom' />
</@cCol>
<@cCol>
<@cLabel label='Prénom' for='surname4' />
<@cInput name='surname4' type='text' placeholder='Exemple: Jean Yves' helpMsg='Saisir mon prénom' />
</@cCol>
</@cRow>
</@cRadio>
</@cField>
</@cCol>
</@cRow>
</@cForm>
<form method="post">
<div class="row ">
<div class="col ">
<div role="radiogroup" aria-describedby="help_radioHelp">
<label class="form-label">
Yes or No ?
</label>
<!-- Inline -->
<p class="form-text mb-m" id="help_radioHelp">
Radio Help</p>
<div class="form-check">
<input type="radio" id="rRadio-1503911650984341" name="rRadio" class="form-check-input" value="1">
<label class="form-label form-check-label" for="rRadio-1503911650984341">
Yes
</label>
</div>
<div class="form-check">
<input type="radio" id="rRadio-1510096590226011" name="rRadio" class="form-check-input" value="2">
<label class="form-label form-check-label" for="rRadio-1510096590226011">
No
</label>
</div>
<div class="form-check">
<input type="radio" id="rRadio-1516281529467681" name="rRadio" class="form-check-input" value="3" disabled>
<label class="form-label form-check-label" for="rRadio-1516281529467681">
Disabled
</label>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div role="radiogroup" aria-describedby="help_radioHelp2">
<label class="form-label">
Yes or No Invalid ?
</label>
<!-- Inline -->
<p class="form-text mb-m" id="help_radioHelp2">
Radio Help</p>
<div class="form-check">
<input type="radio" id="rRadio-1522466468709351" name="rRadio" class="form-check-input" value="1">
<label class="form-label form-check-label" for="rRadio-1522466468709351">
Yes
</label>
</div>
<p class="invalid-feedback" id="error_rRadio">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Une erreur s'est produite !</p>
<div class="form-check is-invalid">
<input type="radio" id="rRadio-1528651407951021" name="rRadio" class="form-check-input" value="4" aria-invalid="true">
<label class="form-label form-check-label" for="rRadio-1528651407951021">
No
</label>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<!-- Column -->
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1541021286434361" role="radiogroup" aria-describedby="help_radioHelp3" role="group" aria-labelledby="legend-id-1541021286434361">
<legend id="legend-id-1541021286434361" >Ok or Nok ?</legend>
<p class="form-text mb-m" id="help_radioHelp3">
Radio Ok Nok Help</p>
<div class="form-check form-check-inline">
<input type="radio" id="ok" name="oknok" class="form-check-input" value="1">
<label class="form-label form-check-label" for="ok">
Ok
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="nok" name="oknok" class="form-check-input" value="2">
<label class="form-label form-check-label" for="nok">
Nok
</label>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div role="radiogroup" aria-describedby="help_radioHelpSelection">
<label class="form-label">
Quel est votre choix ?
</label>
<p class="form-text mb-m" id="help_radioHelpSelection">
Radio Help</p>
<!-- Selection button -->
<div class="form-check btn-selection">
<div class="selection-check">
<input type="radio" id="selectionRadio-1547206225676031" name="selectionRadio" class="form-check-input" value="1">
<label class="form-label form-check-label" for="selectionRadio-1547206225676031">
Choix numéro 1
<p class="selection-subtitle my-sm">Sous-titre d'explication</p>
</label>
</div>
<div class="selection-content">
<div class="row ">
<div class="col ">
<label class="form-label" for="name3">
Nom
</label>
<p class="form-text " id="help_name3">
Saisir mon nom</p>
<input type="text" class=" form-control" name="name3" id="name3" value="Dupont" aria-describedby="help_name3">
</div>
<div class="col ">
<label class="form-label" for="surname3">
Prénom
</label>
<p class="form-text " id="help_surname3">
Saisir mon prénom</p>
<input type="text" class=" form-control" name="surname3" id="surname3" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves" aria-describedby="help_surname3">
</div>
</div>
</div>
</div>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="radio" id="selectionRadio-1553391164917701" name="selectionRadio" class="form-check-input" value="2">
<label class="form-label form-check-label" for="selectionRadio-1553391164917701">
Choix numéro 2
<p class="selection-subtitle my-sm">Sous-titre d'explication</p>
</label>
</div>
<div class="selection-content">
<div class="row ">
<div class="col ">
<label class="form-label" for="name4">
Nom
</label>
<p class="form-text " id="help_name4">
Saisir mon nom</p>
<input type="text" class=" form-control" name="name4" id="name4" value="Dupont" aria-describedby="help_name4">
</div>
<div class="col ">
<label class="form-label" for="surname4">
Prénom
</label>
<p class="form-text " id="help_surname4">
Saisir mon prénom</p>
<input type="text" class=" form-control" name="surname4" id="surname4" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves" aria-describedby="help_surname4">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
name (string)
required- Attribut name du radio
-
label (string)
required- Libellé du radio
-
labelClass (string)
optional- Classe css pour le libellé. La classe "visually-hidden" permet par exemple de masquer le libellé. Valeur par défaut : ''
-
type (string) ('radio' | 'button')
optionnal- Par défaut prend l'aspect d'un radio, si "button" prend l'aspect d'un bouton
-
value (string) (default :'')
optionnal- Valeur par défaut
-
btnClass (string) (default :'')
optionnal- Disponible pour ajouter une classe css si le parmaètre "type" est 'button'
-
selectionButton (boolean) (default :'false')
optionnal- Peut venir en substitution d’un radio bouton, permettant de choisir une option détaillée parmi une liste. New
-
selectionLabel (string) (default :'')
optionnal- En complément de l'attribut selectionButton, permet de donner des détails sur la sélection New
-
textCenter (string) (default :'text')
optionnal- En complément de l'attribut selectionButton, permet de centrer le texte. Le format centré sera préférable pour un usage en horizontal (plusieurs boutons côte-à-côte) avec peu de texte.New
-
inline (boolean) (default : false)
optionnal- Indique si le radio est présenté sur une ligne.
-
disabled (boolean) (default : false)
optionnal- Indique si le radio est désactivé.
-
readonly (boolean) (default : false)
optionnal- Indique si le radio est en lecture seule.
-
checked (boolean) (default : false)
optionnal- Indique si le radio est sélectionné.
-
required (boolean) (default : false)
optionnal- Indique si le radio est obligatoire.
-
html5Required (boolean)
optionnal- permet d'indiquer si le champs doit utliser l'attribut html5 required (par défaut: true)
-
showRequiredLabel (boolean)
optionnal- permet d'indiquer si l'affichage de l'étoile pour "required" s'affiche sur le label du radio (false) ou le label englobant les radio (true) (par défaut: true)
-
helpMsg (string) (default :'')
optionnal- Message d'aide New
-
errorMsg (string) (default :'')
optionnal- Message d'erreur New
-
class (string) (default :'')
optionnal- Attribut class
-
id (string) (default :'')
optionnal- Identifiant unique, égal é l'attribut name si non renseigné
-
params (string) (default :'')
optionnal- Tout autre attribut HTML
Cette macro dorénavant partage la macro cFormCheck avec la macro cCheckbox.
Il est donc possible d'utiliser dorénavant la macro
cFormCheck
.
Exemple
<@cForm>
<@cRow>
<@cCol >
<@cFieldset params='aria-describedby="help_checkboxHelp1"'>
<@cField label='Horaire'>
<@cFormHelp id='checkboxHelp1' label='Choisir un horaire' />
<@cCheckbox name='sport' id='football' label='Football' value='foot' />
<@cCheckbox name='sport' id='natation' label='Natation' value='nata' />
<@cCheckbox name='sport' id='tennis' label='Tennis (Disabled)' value='tenn' disabled=true />
</@cField>
</@cFieldset>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cFieldset params='aria-describedby="help_checkboxHelp2"'>
<@cField label='Horaire'>
<@cFormHelp id='checkboxHelp2' label='Choisir un horaire' />
<@cCheckbox name='sport' id='judo2' label='Judo' value='judo' />
<@cCheckbox errorMsg='Erreur dans le sport !' name='sport' id='football2' label='Football' value='foot' />
</@cField>
</@cFieldset>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cFieldset params='aria-describedby="help_selectHelp"'>
<@cField label='Quel choix ?'>
<@cFormHelp id='selectHelp' label='Faites votre choix' />
<@cCheckbox name='selectCheckbox' id='selectFootball' label='Football' value='foot' selectionButton=true selectionLabel='Sport avec un ballon.' />
<@cCheckbox name='selectCheckbox' id='selectJudo' label='Judo' value='judo' selectionButton=true selectionLabel='Sport de combat.' />
<@cCheckbox name='selectCheckbox' id='selectNatation' label='Natation' value='nata' selectionButton=true selectionLabel='Sport dans l'eau.' />
<@cCheckbox name='selectCheckbox' id='selectTennis' label='Tennis' value='tenn' selectionButton=true selectionLabel='Sport de raquette.' disabled=true />
</@cField>
</@cFieldset>
</@cCol>
</@cRow>
</@cForm>
<form method="post">
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1616870678851061" aria-describedby="help_checkboxHelp1" role="group" aria-labelledby="legend-id-1616870678851061">
<label class="form-label">
Horaire
</label>
<p class="form-text " id="help_checkboxHelp1">
Choisir un horaire</p>
<div class="form-check">
<input type="checkbox" id="football5" name="sport" class="form-check-input" value="foot">
<label class="form-label form-check-label" for="football5">
Football
</label>
</div>
<div class="form-check">
<input type="checkbox" id="natation5" name="sport" class="form-check-input" value="nata">
<label class="form-label form-check-label" for="natation5">
Natation
</label>
</div>
<div class="form-check">
<input type="checkbox" id="tennis5" name="sport" class="form-check-input" value="tenn" disabled>
<label class="form-label form-check-label" for="tennis5">
Tennis (Disabled)
</label>
</div>
</fieldset>
</div>
</div>
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1625055618092731" aria-describedby="help_checkboxHelp2" role="group" aria-labelledby="legend-id-1625055618092731">
<label class="form-label">
Horaire
</label>
<p class="form-text " id="help_checkboxHelp2">
Choisir un horaire</p>
<div class="form-check">
<input type="checkbox" id="judo5" name="sport" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="judo5">
Judo
</label>
</div>
<p class="invalid-feedback" id="error_football4">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Erreur dans le sport !</p>
<div class="form-check is-invalid">
<input type="checkbox" id="football4" name="sport" class="form-check-input" value="foot" aria-invalid="true">
<label class="form-label form-check-label" for="football4">
Football
</label>
</div>
</fieldset>
</div>
</div>
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1643425496576071" aria-describedby="help_selectHelp" role="group" aria-labelledby="legend-id-1643425496576071">
<label class="form-label">
Quel choix ?
</label>
<p class="form-text " id="help_selectHelp">
Faites votre choix</p>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectFootball" name="selectCheckbox" class="form-check-input" value="foot">
<label class="form-label form-check-label" for="selectFootball">
Football
<p class="selection-subtitle my-sm">Sport avec un ballon.</p>
</label>
</div>
</div>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectJudo" name="selectCheckbox" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="selectJudo">
Judo
<p class="selection-subtitle my-sm">Sport de combat.</p>
</label>
</div>
</div>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectNatation" name="selectCheckbox" class="form-check-input" value="nata">
<label class="form-label form-check-label" for="selectNatation">
Natation
<p class="selection-subtitle my-sm">Sport dans l'eau.</p>
</label>
</div>
</div>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectTennis" name="selectCheckbox" class="form-check-input" value="tenn" disabled>
<label class="form-label form-check-label" for="selectTennis">
Tennis
<p class="selection-subtitle my-sm">Sport de raquette.</p>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
name (string)
required- Attribut name du radio
-
label (string)
required- Libellé du radio
-
labelClass (string)
optional- Classe css pour le libellé. La classe "visually-hidden" permet par exemple de masquer le libellé. Valeur par défaut : ''
-
type (string) ('radio' | 'button')
optionnal- Par défaut prend l'aspect d'un radio, si "button" prend l'aspect d'un bouton
-
value (string) (default :'')
optionnal- Valeur par défaut
-
btnClass (string) (default :'')
optionnal- Disponible pour ajouter une classe css si le parmaètre "type" est 'button'
-
selectionButton (boolean) (default :'false')
optionnal- Peut venir en substitution d’un radio bouton, permettant de choisir une option détaillée parmi une liste. New
-
selectionLabel (string) (default :'')
optionnal- En complément de l'attribut selectionButton, permet de donner des détails sur la sélection New
-
textCenter (string) (default :'text')
optionnal- En complément de l'attribut selectionButton, permet de centrer le texte. Le format centré sera préférable pour un usage en horizontal (plusieurs boutons côte-à-côte) avec peu de texte.New
-
inline (boolean) (default : false)
optionnal- Indique si le radio est présenté sur une ligne.
-
disabled (boolean) (default : false)
optionnal- Indique si le radio est désactivé.
-
readonly (boolean) (default : false)
optionnal- Indique si le radio est en lecture seule.
-
checked (boolean) (default : false)
optionnal- Indique si le radio est sélectionné.
-
required (boolean) (default : false)
optionnal- Indique si le radio est obligatoire.
-
html5Required (boolean)
optionnal- permet d'indiquer si le champs doit utliser l'attribut html5 required (par défaut: true)
-
showRequiredLabel (boolean)
optionnal- permet d'indiquer si l'affichage de l'étoile pour "required" s'affiche sur le label du radio (false) ou le label englobant les radio (true) (par défaut: true)
-
helpMsg (string) (default :'')
optionnal- Message d'aide New
-
errorMsg (string) (default :'')
optionnal- Message d'erreur New
-
class (string) (default :'')
optionnal- Attribut class
-
id (string) (default :'')
optionnal- Identifiant unique, égal é l'attribut name si non renseigné
-
params (string) (default :'')
optionnal- Tout autre attribut HTML
Cette macro dorénavant partage la macro cFormCheck avec la macro cRadio.
Il est donc possible d'utiliser dorénavant la macro
cFormCheck
.
Exemple
<@cForm>
<@cRow>
<@cCol>
<@cFieldset params='aria-describedby="help_formcheck1"'>
<@cField label='Horaire'>
<@cFormHelp id='formcheck1' label='Choisir un horaire' />
<@cFormCheck type='checkbox' name='sport' id='football31' label='Football' value='foot' />
<@cFormCheck type='checkbox' name='sport' id='natation31' label='Natation' value='nata' />
<@cFormCheck type='checkbox' name='sport' id='tennis31' label='Tennis (Disabled)' value='tenn' disabled=true />
</@cField>
</@cFieldset>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cFieldset params='aria-describedby="help_formcheckradio2"'>
<@cField label='Horaire'>
<@cFormHelp id='formcheckradio2' label='Choisir un horaire' />
<@cFormCheck type='radio' name='sport' id='judo31' label='Judo' value='judo' />
<@cFormCheck type='radio' errorMsg='Erreur dans le sport !' name='sport' id='football4' label='Football' value='foot' />
</@cField>
</@cFieldset>
</@cCol>
</@cRow>
</@cForm>
<form method="post">
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1671835132026091" aria-describedby="help_formcheck1" role="group" aria-labelledby="legend-id-1671835132026091">
<label class="form-label">
Horaire
</label>
<p class="form-text " id="help_formcheck1">
Choisir un horaire</p>
<div class="form-check">
<input type="checkbox" id="football3" name="sport" class="form-check-input" value="foot">
<label class="form-label form-check-label" for="football3">
Football
</label>
</div>
<div class="form-check">
<input type="checkbox" id="natation3" name="sport" class="form-check-input" value="nata">
<label class="form-label form-check-label" for="natation3">
Natation
</label>
</div>
<div class="form-check">
<input type="checkbox" id="tennis3" name="sport" class="form-check-input" value="tenn" disabled>
<label class="form-label form-check-label" for="tennis3">
Tennis (Disabled)
</label>
</div>
</fieldset>
</div>
</div>
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1672120071267761" aria-describedby="help_formcheckradio2" role="group" aria-labelledby="legend-id-1672120071267761">
<label class="form-label">
Horaire
</label>
<p class="form-text " id="help_formcheckradio2">
Choisir un horaire</p>
<div class="form-check">
<input type="radio" id="judo3" name="sport" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="judo3">
Judo
</label>
</div>
<p class="invalid-feedback" id="error_football4">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Erreur dans le sport !</p>
<div class="form-check is-invalid">
<input type="radio" id="football4" name="sport" class="form-check-input" value="foot" aria-invalid="true">
<label class="form-label form-check-label" for="football4">
Football
</label>
</div>
</fieldset>
</div>
</div>
</form>Paramètres
Voici la liste des différents paramètres de la macro :
-
name (string)
required- Attribut name du radio
-
label (string)
required- Libellé du radio
-
labelClass (string)
optional- Classe css pour le libellé. La classe "visually-hidden" permet par exemple de masquer le libellé. Valeur par défaut : ''
-
type (string) ('radio' | 'button')
optionnal- Par défaut prend l'aspect d'un radio, si "button" prend l'aspect d'un bouton
-
value (string) (default :'')
optionnal- Valeur par défaut
-
btnClass (string) (default :'')
optionnal- Disponible pour ajouter une classe css si le parmaètre "type" est 'button'
-
selectionButton (boolean) (default :'false')
optionnal- Peut venir en substitution d’un radio bouton, permettant de choisir une option détaillée parmi une liste. New
-
selectionLabel (string) (default :'')
optionnal- En complément de l'attribut selectionButton, permet de donner des détails sur la sélection New
-
textCenter (string) (default :'text')
optionnal- En complément de l'attribut selectionButton, permet de centrer le texte. Le format centré sera préférable pour un usage en horizontal (plusieurs boutons côte-à-côte) avec peu de texte.New
-
inline (boolean) (default : false)
optionnal- Indique si le radio est présenté sur une ligne.
-
disabled (boolean) (default : false)
optionnal- Indique si le radio est désactivé.
-
readonly (boolean) (default : false)
optionnal- Indique si le radio est en lecture seule.
-
checked (boolean) (default : false)
optionnal- Indique si le radio est sélectionné.
-
required (boolean) (default : false)
optionnal- Indique si le radio est obligatoire.
-
html5Required (boolean)
optionnal- permet d'indiquer si le champs doit utliser l'attribut html5 required (par défaut: true)
-
showRequiredLabel (boolean)
optionnal- permet d'indiquer si l'affichage de l'étoile pour "required" s'affiche sur le label du radio (false) ou le label englobant les radio (true) (par défaut: true)
-
helpMsg (string) (default :'')
optionnal- Message d'aide New
-
errorMsg (string) (default :'')
optionnal- Message d'erreur New
-
class (string) (default :'')
optionnal- Attribut class
-
id (string) (default :'')
optionnal- Identifiant unique, égal é l'attribut name si non renseigné
-
params (string) (default :'')
optionnal- Tout autre attribut HTML
Exemple
Aide Combo Box
Aide OptGroup
<@cRow>
<@cCol params='aria-describedby="cSelect"'>
<@cField label='Commune'>
<@cSelect name='commune' multiple=true helpMsg='Aide Combo Box'>
<@cOptgroup label=''>
<@cOption label='Paris (75000)' value='1' />
<@cOption label='Parigné-l Eveque (72250)' value='2' />
<@cOption label='Parigné (35133)' value='3'/>
<@cOption label='Parigné-le-Polin (72330)' value='4'/>
</@cOptgroup>
</@cSelect>
</@cField>
</@cCol>
</@cRow>
<@cRow class="mt-m">
<@cCol>
<@cField label='Commune'>
<@cSelect name=''>
<@cOptgroup label=''>
<@cOption label='' value='0' />
<@cOption label='Paris (75000)' value='1' />
<@cOption label='Parigné-l Eveque (72250)' value='2' selected=true />
<@cOption label='Parigné (35133)' value='3' />
<@cOption label='Parigné-le-Polin (72330)' value='4' />
</@cOptgroup>
</@cSelect>
</@cField>
</@cCol>
</@cRow>
<@cRow class="mt-m">
<@cCol params='aria-describedby="cOptGroup"'>
<@cField label='Catégories'>
<@cFormHelp id='cOptGroup' label='Aide OptGroup' />
<@cSelect name=''>
<@cOption label='Pas de sélection possible' value='0' />
<@cOptgroup label='Catégories 1'>
<@cOption label='Item 1 1' value='11' />
<@cOption label='Item 1 2' value='12' />
<@cOption label='Item 1 3' value='13' />
</@cOptgroup>
<@cOptgroup label='Catégories 2'>
<@cOption label='Item 2 1' value='21' />
<@cOption label='Item 2 2' value='22' />
<@cOption label='Item 2 3' value='23' />
</@cOptgroup>
</@cSelect>
</@cField>
</@cCol>
</@cRow>
<div class="row ">
<div class="col " aria-describedby="cSelect">
<label class="form-label">
Commune
</label>
<p class="form-text " id="help_commune">
Aide Combo Box</p>
<select name="commune" class="form-select" multiple aria-describedby="help_commune">
<optgroup label="Catégories 1">
<option value="11">Item 1 1</option>
<option value="12">Item 1 2</option>
<option value="13">Item 1 3</option>
</optgroup>
<optgroup label="Catégories 2">
<option value="21">Item 2 1</option>
<option value="22">Item 2 2</option>
<option value="23">Item 2 3</option>
</optgroup>
</select>
</div>
</div>
<div class="row mt-m">
<div class="col ">
<label class="form-label">
Commune
</label>
<select name="" class="form-select">
<optgroup label="">
<option value="0"></option>
<option value="1">Paris (75000)</option>
<option value="2" selected>Parigné-l Eveque (72250)</option>
<option value="3">Parigné (35133)</option>
<option value="4">Parigné-le-Polin (72330)</option>
</optgroup>
</select>
</div>
</div>
<div class="row mt-m">
<div class="col " aria-describedby="cOptGroup">
<label class="form-label">
Catégories
</label>
<p class="form-text " id="help_cOptGroup">
Aide OptGroup</p>
<select name="" class="form-select">
<option value="0">Pas de sélection</option>
<optgroup label="Catégories 1">
<option value="11">Item 1 1</option>
<option value="12">Item 1 2</option>
<option value="13">Item 1 3</option>
</optgroup>
<optgroup label="Catégories 2">
<option value="21">Item 2 1</option>
<option value="22">Item 2 2</option>
<option value="23">Item 2 3</option>
</optgroup>
</select>
</div>
</div>Paramètres
Les paramètres cSelect
Voici la liste des différents paramètres de la macro :
-
name (string)
required- Attribut name du select
-
class (string) (default :'custom-select')
optionnal- Attribut class
-
size (string) (default :'')
optionnal- permet d'ajouter un suffixe à la classe CSS 'form-control', valeur possible 'lg' ou 'sm'
-
id (string) (default :'')
optionnal- Identifiant unique, égal à l'attribut name si non renseigné
-
multiple (boolean) (default : false)
optionnal- Indique si le select est multi lignes.
-
disabled (boolean) (default : false)
optionnal- Indique si le select est désactivé.
-
readonly (boolean) (default : false)
optionnal- Indique si le select est en lecture seule.
-
checked (boolean) (default : false)
optionnal- Indique si le select est sélectionné.
-
required (boolean) (default : false)
optionnal- Indique si le select est obligatoire.
-
html5Required (boolean)
optionnal- permet d'indiquer si le champs doit utliser l'attribut html5 required (par défaut: true)
-
autocomplete (string) (default :'')
optionnal- permet d'ajouter l'attribut "autocomplete" pour l'input https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/autocomplete
-
helpMsg (string) (default :'')
optionnal- Message d'aide
-
errorMsg (string) (default :'')
optionnal- Message d'erreur.
-
params (string) (default :'listbox')
optionnal- N'importe quel attribut HTML
Les paramètres cOption
Voici la liste des différents paramètres de la macro :
-
label (string)
required- Attribut label de l'option
-
value (string)
required- Attribut value de l'option
-
selected (boolean) (default : false)
optionnal- Indique si l'option est sélectionnée.
-
disabled (boolean) (default : false)
optionnal- Indique si l'option est désactivée.
-
id (string) (default :'')
optionnal- Identifiant unique.
-
class (string) (default :'custom-select')
optionnal- Attribut class
-
params (string) (default :'listbox')
optionnal- N'importe quel attribut HTML
Les paramètres cOptgroup
Voici la liste des différents paramètres de la macro :
-
label (string)
required- Attribut label de l'option
-
disabled (boolean) (default : false)
optionnal- Indique si l'option est désactivée.
-
id (string) (default :'')
optionnal- Identifiant unique.
-
class (string) (default :'custom-select')
optionnal- Attribut class
-
params (string) (default :'listbox')
optionnal- N'importe quel attribut HTML
Exemple
<@cRow class='mb-m'>
<@cCol>
<@cField label='Example 1'>
<@cMultiselect id='MS-Example1'>
<@cMultiselectOption name='multiSelectExample' id='ms-1-option1' label='Option 1' value='option1'/>
<@cMultiselectOption name='multiSelectExample' id='ms-1-option2' label='Option 2' value='option2'/>
<@cMultiselectOption name='multiSelectExample' id='ms-1-option3' label='Option 3' value='option3'/>
<@cMultiselectOption name='multiSelectExample' id='ms-1-option4' label='Option 4' value='option4' disabled=true/>
</@cMultiselect>
</@cField>
</@cCol>
</@cRow>
<@cRow class='mb-m'>
<@cCol>
<@cField label='Example 2 - "disabled"'>
<@cMultiselect id='MS-Example2' disabled=true>
<@cMultiselectOption name='multiSelectExample' label='Option 1' value='option1'/>
<@cMultiselectOption name='multiSelectExample' label='Option 2' value='option2'/>
<@cMultiselectOption name='multiSelectExample' label='Option 3' value='option3'/>
<@cMultiselectOption name='multiSelectExample' label='Option 4' value='option4' disabled=true/>
</@cMultiselect>
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cField label='Example 3 - Sélection limitée à 2 options'>
<@cMultiselect id='MS-Example3' maxSelectedOptions=2>
<@cMultiselectOption name='multiSelectExample' label='Option 1' value='option1'/>
<@cMultiselectOption name='multiSelectExample' label='Option 2' value='option2'/>
<@cMultiselectOption name='multiSelectExample' label='Option 3' value='option3'/>
<@cMultiselectOption name='multiSelectExample' label='Option 4' value='option4' disabled=true/>
</@cMultiselect>
</@cField>
</@cCol>
</@cRow>
<div class="row mb-m">
<div class="col ">
<label class="form-label">
Example 1
</label>
<div class="multiselect " id="MS-Example1" data-maxoptions="0">
<div class="tags-container mt-sm"></div>
<div class="dropdown">
<button class="form-select multi-select " type="button" id='btn-MS-Example1' data-bs-toggle="dropdown" aria-expanded="false" params=>
Select options
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="ms-1-option1" autocomplete="off" value="option1">
<label class="form-label btn btn-outline-primary my-0" for="ms-1-option1">
Option 1
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="ms-1-option2" autocomplete="off" value="option2">
<label class="form-label btn btn-outline-primary my-0" for="ms-1-option2">
Option 2
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="ms-1-option3" autocomplete="off" value="option3">
<label class="form-label btn btn-outline-primary my-0" for="ms-1-option3">
Option 3
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="ms-1-option4" autocomplete="off" value="option4" disabled>
<label class="form-label btn btn-outline-primary my-0" for="ms-1-option4">
Option 4
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row mb-m">
<div class="col ">
<label class="form-label">
Example 2 - "disabled"
</label>
<div class="multiselect " id="MS-Example2" data-maxoptions="0">
<div class="tags-container mt-sm"></div>
<div class="dropdown">
<button class="form-select multi-select disabled" type="button" id='btn-MS-Example2' data-bs-toggle="dropdown" aria-expanded="false" disabled params=>
Select options
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1760394159892811" autocomplete="off" value="option1">
<label class="form-label btn btn-outline-primary my-0" for="multiSelectExample-1760394159892811">
Option 1
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1767679099134481" autocomplete="off" value="option2">
<label class="form-label btn btn-outline-primary my-0" for="multiSelectExample-1767679099134481">
Option 2
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1774964038376151" autocomplete="off" value="option3">
<label class="form-label btn btn-outline-primary my-0" for="multiSelectExample-1774964038376151">
Option 3
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1782248977617821" autocomplete="off" value="option4" disabled>
<label class="form-label btn btn-outline-primary my-0" for="multiSelectExample-1782248977617821">
Option 4
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<label class="form-label">
Example 3 - Sélection limitée à 2 options
</label>
<div class="multiselect " id="MS-Example3" data-maxoptions="2">
<div class="tags-container mt-sm"></div>
<div class="dropdown">
<button class="form-select multi-select " type="button" id='btn-MS-Example3' data-bs-toggle="dropdown" aria-expanded="false" params=>
Select options
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1789533916859491" autocomplete="off" value="option1">
<label class="form-label btn btn-outline-primary my-0" for="multiSelectExample-1789533916859491">
Option 1
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1796818856101161" autocomplete="off" value="option2">
<label class="form-label btn btn-outline-primary my-0" for="multiSelectExample-1796818856101161">
Option 2
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1804103795342831" autocomplete="off" value="option3">
<label class="form-label btn btn-outline-primary my-0" for="multiSelectExample-1804103795342831">
Option 3
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1811388734584501" autocomplete="off" value="option4" disabled>
<label class="form-label btn btn-outline-primary my-0" for="multiSelectExample-1811388734584501">
Option 4
</label>
</li>
</ul>
</div>
</div>
</div>
</div>Paramètres
Les paramètres cSelect
Voici la liste des différents paramètres de la macro :
-
class (string)
optionnal- the CSS class of the element, default 'custom-select'
-
labelOptionSelection (string)
optionnal- label for the selection button
-
maxSelectedOptions (number)
optionnal- Number of items that can be selected, default 0 (unlimited)
-
id (string)
optionnal- the ID of the element, default ''
-
helpMsg (string)
optionnal- Content of the help message for radio, default ''
-
errorMsg (string)
optionnal- Content of the error message for radio, default ''
-
params (string)
optionnal- additional HTML attributes to include in the ckeckbox element default ''
-
disabled (boolean)
optionnal- Disable element, default false
Les paramètres cMultiselectOption
Voici la liste des différents paramètres de la macro :
-
class (string)
optionnal- the CSS class of the option
-
classCheckbox (string)
optionnal- the CSS class of the checkbox in the option
-
name (string)
required- the name of of the option
-
label (string)
required- the label associated to the option
-
value (string)
optionnal- the value associated to the checkbox of the option
-
id (string)
optionnal- the ID of the element, default ''
-
params (string)
optionnal- additional HTML attributes to include in the option element default ''
-
disabled (boolean)
optionnal- Disable element, default false
Exemple
Accueil
Ce questionnaire est personnel
Votre nom : Marcel
<@cStepDone step='1' title='Accueil' idx=1 >
<@cRow>
<@cCol>
<@cText>Ce questionnaire est personnel</@cText>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cText>Votre nom : <b>Marcel</b></@cText>
</@cCol>
</@cRow>
</@cStepDone>
<section class="step step-done ">
<section class="step-title">
<div class="container d-flex justify-content-between align-items-center">
<h2 class="title mt-0" title="Accueil">
<span class="step-number">
<svg width="32" height="32" role="img" aria-label="Step Accueil done" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9607 23.9932L5.33203 16.3882L7.67726 14.0502L12.9607 19.3173L24.3201 7.99316L26.6654 10.3311L12.9607 23.9932Z" fill="white"/></svg></span>
<span>
Accueil</span>
</h2>
<span class="d-none d-sm-block">
<button class="btn btn-secondary btn-sm-block" type="submit"name="action_doGoToStep"value="1" aria-label="Update step Accueil" formnovalidate>
<span class="btn-label ">Update</span>
</button>
</span>
</div>
</section>
<div class="container mt-0">
<div class="step-content">
<ul class="list-unstyled" >
<div class="row ">
<div class="col ">
<p>
Ce questionnaire est personnel</p>
</div>
</div>
<div class="row ">
<div class="col ">
<p>
Votre nom : <b>Marcel</b></p>
</div>
</div>
</ul>
<div class="d-block d-sm-none mt-m">
<button class="btn btn-primary btn-sm-block" type="submit"name="action_doGoToStep"value="1" aria-label="Update step Accueil" formnovalidate>
<span class="btn-label ">Update</span>
</button>
</div>
</div>
</div>
</section>Paramètres
Voici la liste des différents paramètres de la macro :
-
step (string)
required- Numéro de l'étape
-
title (string)
required- Titre de l'étape
-
titleLevel (number) (default : 2)
optionnal- Niveau de titre de l'étape
-
idx (number)
required- Index de l'étape
-
actionName (string) (default :'action_doGoToStep')
optionnal- Action utilisée pour le bouton "Modifier"
-
actionLabel (string) (default :'Update')
optionnal- Label du bouton "Modifier"
-
actionAriaLabelKey (string) (default :'themeparisfr.ariaLabelUpdate')
optionnal- Label accessible -aria-label- pour le bouton "Modifier"
-
actionHref (string) (default :'')
optionnal- Url a préciser si on ne veux pas utiliser le formulaire par défaut.
-
actionClass (string) (default :'')
optionnal- Class pour le lien.
-
actionParams (string) (default :'')
optionnal- Paramètres pour le lien.
-
class (string) (default :'')
optionnal- Classes CSS
-
id (string) (default :'')
optionnal- Identifiant unique
-
params (string) (default :'')
optionnal- Tout autre attribut HTML
- #nested : Informations à présenter à l'intérieur de la macro.
Exemple
2 Dossier
Fields followed by an asterisk * are mandatory.
<@cStepCurrent step='2' showTitle=true title='Dossier' actionNextStep='valid'>
<@cFieldset legend='Informations générales' legendClass='visually-hidden'>
<@cRow>
<@cCol>
<@cField label='Nom' for='fname' labelData='<small class="text-muted">(Nom de famille)</small>'>
<@cInput name='fname' placeholder='Exemple: Durand' params='aria-describedby="help_fname"'/>
<@cFormHelp id='fname' label='Saisir votre nom de famille' />
</@cField>
</@cCol>
<@cCol>
<@cField label='Prénom' for='firstname-step'>
<@cInput name='firstname-step' required=false />
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
<@cFieldset legend='Choix de conservation des données' legendClass='visually-hidden'>
<@cRow>
<@cCol params='aria-describedby="mydata"'>
<@cField>
<@cLabel label='Conserver ces données' for='mydata' />
<@cRow>
<@cCol>
<@cRadio name='mydata' id='md2' label='Oui' value='1' inline=true />
<@cRadio name='mydata' id='md1' label='Non' value='2' inline=true />
</@cCol>
</@cRow>
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
</@cStepCurrent>
<section class="step step-current " id="current_step">
<div class="step-title">
<div class="container ">
<h3 class="title" data-step="2" title="Dossier - current step" aria-current="step">
<span class="step-number">
2</span>
<span>
Dossier</span>
</h3>
</div>
</div>
<div class="step-content">
<div class="container ">
<p class="mandatory-warning visually-hidden">
Fields followed by an asterisk * are mandatory.</p>
<div class="step-group">
<fieldset class="w-100 flex-fill " id="fieldset-id-1831883309276191" role="group" aria-labelledby="legend-id-1831883309276191">
<legend id="legend-id-1831883309276191"">
<span class="h3 group-title">
Informations générales
</span>
</legend>
<div class="row ">
<div class="col ">
<label class="form-label" for="fname">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<input type="text" class=" form-control" name="fname" id="fname" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand" aria-describedby="help_fname">
<p class="form-text " id="help_fname">
Saisir votre nom de famille</p>
</div>
<div class="col ">
<label class="form-label" for="firstname-step">
Prénom
</label>
<input type="text" class=" form-control" name="firstname-step" id="firstname-step" value="">
</div>
</div>
<fieldset id="fieldset-id-1833268248517861" role="group" aria-labelledby="legend-id-1833268248517861">
<legend class="visually-hidden" id="legend-id-1833268248517861" >Choix de conservation des données</legend>
<div class="row ">
<div class="col " aria-describedby="mydata">
<label class="form-label" for="mydata">
Conserver ces données
</label>
<div class="row ">
<div class="col ">
<div class="form-check form-check-inline">
<input type="radio" id="md2" name="mydata" class="form-check-input" value="1">
<label class="form-label form-check-label" for="md2">
Oui
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="md1" name="mydata" class="form-check-input" value="2">
<label class="form-label form-check-label" for="md1">
Non
</label>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</fieldset>
</div>
</div>
</div>
<div class="step-footer">
<div class="container ">
<p class="mandatory-warning">
Fields followed by an asterisk * are mandatory.</p>
<div class="step-current-toolbar d-flex justify-content-center justify-content-sm-end">
<ul class="list-unstyled d-flex justify-content-end flex-column flex-sm-row align-items-center" >
<li class="order-5">
<button class="btn btn-primary ms-sm" type="submit" id="valid" name="valid">
<span class="btn-label ">Previous step</span>
</button>
</li>
<li class="order-4 visually-hidden" id="reset-backup">
<button class="btn btn-tertiary ms-sm" type="submit" id="Reset" name="Reset" formnovalidate>
<span class="btn-label ">Delete progress</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</section>
<div class="modal cmodal fade" id="reset-stepModal" role="dialog" aria-labelledby="modalreset-stepTitle" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title h5 main-color" id="modalreset-stepTitle">
Remove the saved step</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-tertiary m-1" type="button"data-bs-dismiss="modal">
<span class="btn-label ">No save, return to my process</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Yes remove those informations</span></button>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const formValidateButton = document.querySelector('#valid');
formValidateButton.addEventListener('click', (e) => {
const invalids = document.querySelectorAll('.form-control:invalid','.form-control:user-invalid');
const arrInvalids = Array.prototype.slice.call(invalids);
arrInvalids.forEach( function( invalid ){
invalid.classList.add('is-invalid')
invalid.setAttribute('aria-invalid', 'true');
const isRequired = invalid.getAttributeNode('required');
if( isRequired !='' ){
let pInvalid = document.createElement("p");
pInvalid.classList.add( 'invalid-feedback' );
pInvalid.setAttribute( 'role', 'alert' );
pInvalid.innerHTML = `Fields followed by an asterisk * are mandatory.`;
if (invalid.closest('.input-group') != null) {
invalid.closest('.input-group').after(pInvalid);
} else {
invalid.after(pInvalid);
}
}
});
})
const saveStep = document.getElementById('save-step-status');
if(saveStep){
const at = saveStep.querySelector('.alert-title');
const btnReset = document.createElement('button');
btnReset.classList.add('btn', 'btn-tertiary', 'ms-sm');
btnReset.innerHTML = 'Remove the saved step';
btnReset.setAttribute('type', 'button');
btnReset.setAttribute('data-bs-target', '#reset-stepModal');
btnReset.setAttribute('data-bs-toggle', 'modal');
at.appendChild(btnReset);
const btnModalReset = document.querySelector('#modal-reset-backup');
btnModalReset.addEventListener('click', (e) => {
const resetBackup = document.getElementById('Reset');
resetBackup.click();
});
}
});
</script>Paramètres
Voici la liste des différents paramètres de la macro :
-
step (sring)
required- Numéro de l'étape
-
title (string)
required- Titre de l'étape
-
showTitle (boolean) (default: true)
optionnal- Affiche ou masque le titre de l'étape New
- titleLevel (number) (default : 2)
optionnal- Niveau de titre de l'étape- actionNextStep (string) (default : '')
optionnal- Action pour le formulaire pour passer à l'étape suivante. Si vide le bouton n'est pas affiché.- titleNextStep (string) (default : '')
optionnal- Attribut title d'aide pour l'accesibilité pour l'action revenir à l'étape suivante. .- labelNextStep (string) (default : 'Previous step')
optionnal- Texte du bouton étape suivante.- actionPrevStep (string) (default : '')
optionnal- Action pour le formulaire pour revenir à l'étape précédente. Si vide le bouton n'est pas affiché.- titlePrevStep (string) (default : '')
optionnal- Attribut title d'aide pour l'accesibilité pour l'action revenir à l'étape précédente. .- labelPrevStep (string) (default : 'Next step')
optionnal- Texte du bouton étape précédente.- actionSaveStep (string) (default : '')
optionnal- Action pour le formulaire pour sauvegarder l'étape. Si vide le bouton n'est pas affiché.- titleSaveStep (string) (default : '')
optionnal- Attribut title d'aide pour l'accesibilité pour l'action "Sauvegarder".- labelSaveStep (string) (default : 'Save step')
optionnal- Texte du bouton "Sauvegarder"- actionSaveForBackUpStep (string) (default : '')
optionnal- Action pour le formulaire pour sauvegarder en cours de saisie du formulaire. Si vide le bouton n'est pas affiché.- titleSaveForBackUpStep (string) (default : '')
optionnal- Attribut title d'aide pour l'accesibilité pour l'action "Sauvegarder".- labelSaveForBackUpStep (string) (default : 'Save progress')
optionnal- Texte du bouton "Sauvegarder".- actionResetBackUpStep (string) (default : '')
optionnal- Action pour supprimer la sauvegarde en cours. Si vide le bouton n'est pas affiché.- titleResetBackUpStep (string) (default : '')
optionnal- Attribut title d'aide pour l'accesibilité pour l'action "Supprimer la sauvegarde en cours".- labelResetBackUpStep (string) (default : 'Delete progress')
optionnal- Texte du bouton "Supprimer la sauvegarde en cours".- showPrevStep (boolean) (default : true)
optionnal- Affiche le bouton "Etape précédente dans l'étape. Si false traiter le retour à l'étape "précédente" dans l'étape passée (Macro cStepDone)- hasSteps (boolean) (default : true)
optionnal- Si le formulaire a plus d'une étape, true par défaut, affiche le numéro de l'étape.- hasMandatory (boolean) (default : true)
optionnal- Si l'étape contient des champs obligatoire affiche le message "Les champs obligatoires...". Texte du message dans le fichier "WEB-INF\classes\fr\paris\lutece\plugins\themeparisfr\resources\themeparisfr_messages_fr.properties" clé "msgMandatory".- class (string) (default : '')
optionnal- Nom de classe- params (string) (default :'')
optionnal- Tout autre attribut HTML- #nested : Formulaire à présenter à l'intérieur de la macro.
- titleLevel (number) (default : 2)
Exemple
3 Localisation
<@cStepNext step='3' title='Localisation' />
<section class="step step-next">
<section class="step-title">
<div class="container ">
<h2 class="title" title="Localisation" data-step="3">
<span class="step-number">
3</span>
<span>
Localisation</span>
</h2>
</div>
</section>
</section>Paramètres
Voici la liste des différents paramètres de la macro :
-
step (string)
required- Numéro de l'étape
-
title (string)
required- Titre de l'étape
-
titleLevel (number) (default : 2)
optionnal- Niveau de titre de l'étape
-
class (string) (default : '')
optionnal- Nom de classe
-
id (string) (default : '')
optionnal- Identifiant
-
params (string) (default :'')
optionnal- Tout autre attribut HTML
Exemple
Contenu d'une étape : Avec bulle d'aide
2 Dossier
Fields followed by an asterisk * are mandatory.
Contenu d'une étape avec au moins une itération
<@cStepGroup title='Information' help=''>
<@cRow>
<@cCol>
<@cField label='Nom' for='name6' labelData='<small class="text-muted">(Nom de famille)</small>'>
<@cFormHelp id='name6' label='Saisir votre nom de famille' />
<@cInput name='name6' placeholder='Exemple: Durand' />
</@cField>
</@cCol>
<@cCol>
<@cField label='Prénom' for='firstname-group'>
<@cFormHelp id='firstname-group' label='Saisir votre prénom' />
<@cInput name='firstname-group' required=false />
</@cField>
</@cCol>
</@cRow>
</@cStepGroup>
<@cStepGroup title='Information' iterate=true iteration=1>
<@cRow>
<@cCol>
<@cField label='Nom' for='name7' labelData='<small class="text-muted">(Nom de famille)</small>'>
<@cFormHelp id='name7' label='Saisir votre nom de famille' />
<@cInput name='name7' placeholder='Exemple: Durand' />
</@cField>
</@cCol>
<@cCol>
<@cField label='Prénom' for='firstname-group-2'>
<@cFormHelp id='firstname-group-2' label='Saisir votre prénom' />
<@cInput name='firstname-group-2' required=false />
</@cField>
</@cCol>
</@cRow>
</@cStepGroup>
<p class="lead">
Contenu d'une étape : Avec bulle d'aide</p>
<section class="step step-current " id="current_step">
<div class="step-title">
<div class="container ">
<h3 class="title" data-step="2" title="Dossier - current step" aria-current="step">
<span class="step-number">
2</span>
<span>
Dossier</span>
</h3>
</div>
</div>
<div class="step-content">
<div class="container ">
<p class="mandatory-warning visually-hidden">
Fields followed by an asterisk * are mandatory.</p>
<div class="step-group">
<fieldset class="w-100 flex-fill " id="fieldset-id-1859732701692891" role="group" aria-labelledby="legend-id-1859732701692891">
<legend id="legend-id-1859732701692891"">
<span class="h3 group-title">
Information
</span>
</legend>
<div class="row ">
<div class="col ">
Lorem ipsum Help</div>
</div>
<div class="row ">
<div class="col ">
<label class="form-label" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand">
</div>
<div class="col ">
<label class="form-label" for="firstname">
Prénom
</label>
<p class="form-text " id="help_firstname">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname" id="firstname" value="">
</div>
</div>
</fieldset>
</div>
<hr>
<p class="lead">
Contenu d'une étape avec au moins une itération</p>
<div class="step-group">
<fieldset class="w-100 flex-fill " id="fieldset-id-1863117640934561" role="group" aria-labelledby="legend-id-1863117640934561">
<legend class="d-flex justify-content-between align-items-center" id="legend-id-1863117640934561"">
<span class="h3 group-title">
Information avec Itération (2)
<div class="btn btn-group ms-auto mt-0">
<button class="btn btn-danger me-sm ms-auto mt-0" type="submit"name="action_removeIteration" value="rm_1">
<svg class="paris-icon paris-icon-trash"data-mce-svg="paris-icon paris-icon-trash" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-trash"></use>
</svg>
<span class="btn-label">
Delete</span>
</button>
<button class="btn btn-primary ms-auto" type="submit"name="action_addIteration" value="add_1">
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-plus"></use>
</svg>
<span class="btn-label">
Add</span>
</button>
</div>
</span>
</legend>
<div class="row ">
<div class="col ">
<label class="form-label" for="name635">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name635">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name635" id="name635" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand">
</div>
<div class="col ">
<label class="form-label" for="firstname-2">
Prénom
</label>
<p class="form-text " id="help_firstname-2">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname-2" id="firstname-2" value="">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="step-footer">
<div class="container ">
<p class="mandatory-warning">
Fields followed by an asterisk * are mandatory.</p>
<div class="step-current-toolbar d-flex justify-content-center justify-content-sm-end">
<ul class="list-unstyled d-flex justify-content-end flex-column flex-sm-row align-items-center" >
<li class="order-5">
<button class="btn btn-primary ms-sm" type="submit" id="valid" name="valid">
<span class="btn-label ">Previous step</span>
</button>
</li>
<li class="order-4 visually-hidden" id="reset-backup">
<button class="btn btn-tertiary ms-sm" type="submit" id="Reset" name="Reset" formnovalidate>
<span class="btn-label ">Delete progress</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</section>
<div class="modal cmodal fade" id="reset-stepModal" role="dialog" aria-labelledby="modalreset-stepTitle" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title h5 main-color" id="modalreset-stepTitle">
Remove the saved step</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-tertiary m-1" type="button"data-bs-dismiss="modal">
<span class="btn-label ">No save, return to my process</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Yes remove those informations</span></button>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const formValidateButton = document.querySelector('#valid');
formValidateButton.addEventListener('click', (e) => {
const invalids = document.querySelectorAll('.form-control:invalid','.form-control:user-invalid');
const arrInvalids = Array.prototype.slice.call(invalids);
arrInvalids.forEach( function( invalid ){
invalid.classList.add('is-invalid')
invalid.setAttribute('aria-invalid', 'true');
const isRequired = invalid.getAttributeNode('required');
if( isRequired !='' ){
let pInvalid = document.createElement("p");
pInvalid.classList.add( 'invalid-feedback' );
pInvalid.setAttribute( 'role', 'alert' );
pInvalid.innerHTML = `Fields followed by an asterisk * are mandatory.`;
if (invalid.closest('.input-group') != null) {
invalid.closest('.input-group').after(pInvalid);
} else {
invalid.after(pInvalid);
}
}
});
})
const saveStep = document.getElementById('save-step-status');
if(saveStep){
const at = saveStep.querySelector('.alert-title');
const btnReset = document.createElement('button');
btnReset.classList.add('btn', 'btn-tertiary', 'ms-sm');
btnReset.innerHTML = 'Remove the saved step';
btnReset.setAttribute('type', 'button');
btnReset.setAttribute('data-bs-target', '#reset-stepModal');
btnReset.setAttribute('data-bs-toggle', 'modal');
at.appendChild(btnReset);
const btnModalReset = document.querySelector('#modal-reset-backup');
btnModalReset.addEventListener('click', (e) => {
const resetBackup = document.getElementById('Reset');
resetBackup.click();
});
}
});
</script>Paramètres
Voici la liste des différents paramètres de la macro :
-
title (string)
required- Titre de l'étape
-
iterable (boolean) (default : false)
optionnal- Par défaut le contenu n'est pas itérable, si true le bloc afficher le bouton pour ajouter une itération et si le numéro -paramétre iteration est supérieur é 0 alors on affiche aussi le bouton de suppression de l'itération.
-
iteration (number) (default : 0)
optionnal- Numéro de l'itération. Si supérieur à 0 permet d'afficher le bouton de suppression de l'itération.
-
iterationMax (number) (default : 10)
optionnal- Nombre max d'itération.
-
labelAddIteration (string) (default :'Add')
optionnal- Libellé du bouton d'ajout de l'itération.
-
labelDelIteration (string) (default :'Delete')
optionnal- Libellé du bouton de suppresssion de l'itération.
-
headerParams (string) (default :'')
optionnal- Aide affichée dans la bulle d'aide
-
help (string) (default :'')
optionnal- Ajout d'un texte d'aide au header
-
class (string) (default :'main')
optionnal- Les valeurs possibles sont 'main','primary','external-primary','outline-external-link' et 'link'
-
id (string) (default :'')
optionnal- Identifiant unique
-
params (string) (default :'')
optionnal- Tout autre attribut HTML
- #nested : Informations à présenter à l'intérieur de la macro.
Exemple
<@cBlock>
<@fcBtnImg />
</@cBlock>
<@cBlock>
<@fcImg label='Quid' />
</@cBlock>
<@cCard>
<@fcMessage>Quoi de plus...</@fcMessage>
</@cCard>
<div>
<div class="fr-connect-group m-0">
<button class="fr-connect m-0" type="submit">
<span class="fr-connect__login">
Créer mon compte avec</span>
<span class="fr-connect__brand">
FranceConnect</span>
</button>
</div>
</div>
<div>
<svg height="74" viewBox="0 0 312 74" width="248" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="fc-img-title">
<clipPath id="a"><path d="m0 0h312v74h-312z"/></clipPath>
<title id="fc-img-title">Quid FranceConnect</title>
<g clip-path="url(#a)">
<path d="m0 0h312v74h-312z" fill="#fff"/>
<rect fill="#000091" height="74" rx="4" width="312"/>
<rect id="fc-btn-bg" fill="#000091" height="70" rx="4" transform="translate(1 1)" width="310"/>
<text fill="#fff" font-family="Montserrat-Regular, Montserrat" font-size="15" font-weight="500" transform="translate(81 32)">
<tspan x="0" y="0">Quid</tspan>
<tspan font-family="Montserrat-Bold, Montserrat" font-weight="700" font-size="18"><tspan x="0" y="20">FranceConnect</tspan></tspan>
</text>
<path d="m18 19.508v29.93l25.9 15.007 25.984-15.008v-29.929l-25.984-15.008z" fill="#fff" transform="translate(-5.142 1.529)"/>
<path d="m43.757 3.3-26.757 15.522v30.959l26.842 15.436 26.843-15.436v-30.959zm25.984 45.966-25.984 15.008-25.9-15.008v-29.929l25.9-15.008 25.984 15.008z" fill="#000091" transform="translate(-5 1.7)"/><path d="m57.373 19.675-11.749-6.775-11.748 6.775-7.976 4.631v22.726l19.724 11.406 19.725-11.406v-22.726z" fill="#0069cc" transform="translate(-6.268 .333)"/><path d="m62.107 35.626-7.118-12.264-6.089-10.462v45.538l19.724-11.406z" fill="#000091" transform="translate(-9.544 .333)"/><path d="m56 24.488 7.118 12.263 6.518-11.32-7.976-4.631z" fill="#0069cc" transform="translate(-10.555 -.792)"/><path d="m60.649 19.675-11.749-6.775 6.089 10.463z" fill="#ed1c24" transform="translate(-9.544 .333)"/><path d="m54.989 23.362-6.089-10.462z" fill="#0069cc" transform="translate(-9.544 .333)"/><path d="m70.818 48.926v-22.726l-6.518 11.32z" fill="#ed1c24" transform="translate(-11.737 -1.561)"/><path d="m64.3 39.4 6.518 11.406z" fill="#ed1c24" transform="translate(-11.737 -3.441)"/>
<path d="m32.5 35.626 7.118-12.263 6-10.463v45.538l-19.718-11.406z" fill="#0069cc" transform="translate(-6.268 .333)"/>
<path d="m39.621 24.488-7.121 12.263-6.6-11.32 7.976-4.631z" fill="#ed1c24" transform="translate(-6.268 -.792)"/>
<path d="m35.2 19.675 11.749-6.775-6 10.463z" fill="#000091" transform="translate(-7.592 .333)"/>
<path d="m41.9 23.362 6-10.463z" fill="#0069cc" transform="translate(-8.547 .333)"/>
<path d="m25.9 48.926v-22.726l6.6 11.32z" fill="#000091" transform="translate(-6.268 -1.561)"/>
<path d="m32.5 39.4-6.6 11.406z" fill="#0069cc" transform="translate(-6.268 -3.441)"/>
<path d="m57.144 41.909a4.133 4.133 0 0 1 1.029 0c.257.086.6.086.6.172-.086.515-.858.6-1.2 1.115h-.173c-.172.086-.086.429-.257.429-.172-.086-.343 0-.6.086a1.02 1.02 0 0 0 .943.343c.086 0 .172.086.172.257a.084.084 0 0 0 .086-.086c.086 0 .086 0 .086.086v.257c-.172.257-.515.172-.772.172a4.155 4.155 0 0 0 1.458 0c.343-.172 0-.772.257-1.029-.086 0 0-.172-.172-.172.086-.086.257-.343.343-.343s.343-.086.343-.172-.257-.172-.172-.343c.343-.257.686-.6.515-1.029-.086-.172-.6-.172-.858-.257a2.112 2.112 0 0 0 -1.029.086 3.866 3.866 0 0 0 -.943.257 8.57 8.57 0 0 0 -1.2.686 16.245 16.245 0 0 1 1.544-.515z" fill="#000091" transform="translate(-10.498 -3.72)"/>
<path d="m57.617 43.546a6.545 6.545 0 0 0 -.686-.943 3.732 3.732 0 0 1 -.686-1.286 4.163 4.163 0 0 1 0-1.458 9.721 9.721 0 0 0 -.515-2.744c-.172-.429-.257-.943-.429-1.372a3.046 3.046 0 0 0 -.343-.772.389.389 0 0 1 0-.429 2.61 2.61 0 0 0 .686-.686.78.78 0 0 0 -.257-.943c-.429-.172-.343.429-.686.6h-.172c-.086-.172.086-.257.172-.343 0-.086 0-.172-.086-.172a1 1 0 0 1 -.6-.172 5.263 5.263 0 0 0 -2.487-1.626 2.374 2.374 0 0 0 .772.086 2.156 2.156 0 0 0 1.286-.172c.343-.172.343-.6.429-.943.086-.086 0-.172 0-.343s-.172-.343-.257-.515a1.061 1.061 0 0 1 -.172-.257c-.686-.772-3.345-3-8.319-2.659a21.349 21.349 0 0 0 -7.89 2.315c-.086 0-.172.086-.343.086a5.336 5.336 0 0 0 -1.629 1.202 4.836 4.836 0 0 0 -1.115 2.058 5.667 5.667 0 0 0 -1.715 2.058c-.515 1.029-1.2 1.887-1.2 3v.172c.086.343.086.6.172.943a17.563 17.563 0 0 1 .429 2.058l.257 1.029c.172.343 0 .772.257 1.115.086.172.086.429.343.515v.252c.086.086.086.086.172.086v.257a9.59 9.59 0 0 1 1.458 1.8c.172.343-.6.172-.943.086a6.813 6.813 0 0 1 -1.544-1.2l-.086.086c.257.429 1.2.943.686 1.286-.257.172-.6-.172-.772.086-.086.086 0 .257 0 .343-.343-.257-.772-.086-1.115-.257-.257-.086-.343-.515-.6-.515a10.811 10.811 0 0 0 -2.4-.343h-.172a9.9 9.9 0 0 0 -2.23-.086v.943a8.609 8.609 0 0 1 2.058-.343h.172c.172 0 .429-.086.6 0a2.918 2.918 0 0 0 -.858.086 9.334 9.334 0 0 0 -2.058.6v.858c.343.086.772.086 1.115.172a7.144 7.144 0 0 1 1.286.343 8.421 8.421 0 0 1 1.544.686c.257.172.343.343.6.515a1.09 1.09 0 0 0 1.029 0h.343a4.366 4.366 0 0 0 2.482-1.289.084.084 0 0 0 .086.086 5.451 5.451 0 0 1 -.515 1.544c0 .086-.086.172.086.257h.086c-.086 0-.086 0-.086.086s.172 0 .257.086a1.155 1.155 0 0 0 -.772.429c0 .086.086.086.172.086-.086.086-.343.086-.343.172l.086.086c-.086 0-.086 0-.086.086v.172c-.172 0-.257.172-.343.172.257.172.429 0 .686 0a18.349 18.349 0 0 1 -1.887.858c-.086 0 0 .172-.086.172.172.086.343-.086.515-.086a6.4 6.4 0 0 1 -1.029.6l2.058 1.2a9.718 9.718 0 0 0 2.315-1.885l.086.086a2.869 2.869 0 0 1 -1.029 1.458c-.343.172-.6.515-.858.6l1.544.858a4.054 4.054 0 0 1 1.029-.6c.086 0 .172.086.343.086a2.221 2.221 0 0 1 1.972-.943c0 .086 0 .086.086.086a.084.084 0 0 0 .086-.086c0 .086 0 .086-.086.086-.257.172-.429.343-.686.515-.086.086 0 .086.086.086a6.019 6.019 0 0 0 .772-.515.315.315 0 0 0 -.086.257 13.786 13.786 0 0 0 -1.972 1.887l8.151 4.718c.257-.343.6-.858.943-1.286a72.649 72.649 0 0 1 4.459-5.917 2.517 2.517 0 0 1 .858-.257c1.029 0 2.144.257 3.173.343.086 0 .257.086.343.086a2.948 2.948 0 0 0 1.2-.086 1.741 1.741 0 0 0 1.115-.943 1.544 1.544 0 0 0 0-1.372c-.429-.515.343-.772.6-1.115.172-.343-.172-.515-.172-.772-.086-.086-.343-.086-.429-.257.429-.172 1.115-.6.772-1.115-.172-.343-.515-.772-.172-1.115.429-.257 1.115-.257 1.286-.686.517-.862-.254-1.462-.597-2.062zm-2.659-3.087c-.086.086.172.172.172.343a.65.65 0 0 1 -.343.172l-.343.343c.086 0 0 .172.172.172-.257.343.172.943-.257 1.029a2.126 2.126 0 0 1 -1.458 0c.257-.086.6.086.772-.172v-.257a.084.084 0 0 0 -.087-.089l-.086.086c0-.086-.172-.257-.172-.257a1.02 1.02 0 0 1 -.943-.343.7.7 0 0 1 .6-.086c.172 0 .086-.343.257-.429h.172c.343-.515 1.115-.686 1.2-1.115 0-.086-.343-.086-.6-.172a4.132 4.132 0 0 0 -1.029 0 6.427 6.427 0 0 0 -1.372.429 5.468 5.468 0 0 1 1.2-.686 3.866 3.866 0 0 1 .943-.257 2.19 2.19 0 0 1 1.029-.086c.343.086.772.086.858.257a1.677 1.677 0 0 1 -.685 1.117z" fill="#fff" transform="translate(-6.168 -1.583)"/>
</g>
</svg>
</div>
<div class="card ">
<div class="card-body">
<p>
<span class="d-block">
Quoi de plus...</span>
<a href="https://franceconnect.gouv.fr/" target="_blank" rel="noopener" >
<span class="link-label">More informations on FranceConnect's website</span>
</a>
</p>
</div>
</div>Paramètres
Les paramètres de la macro @fcBtnImg - bouton avec logo FranceConnect -
-
label (string)
required(par défaut : 'Créer mon compte avec') : Texte souhaité, 'Créer', 'Supprimer'...
-
type (string)
required( par défaut : 'button')optionnal- Type du bouton, l'autre valeur est 'link'
-
linkClass (string)
optionnal- Classes CSS du lien si le type est 'link'
-
btnClass (string)
optionnal( par default : 'fr-connect m-0') : Classes CSS du bouton si le type est 'button'
-
url (string)
optionnal- Url du lien si le type est 'link'
Les paramètres de la macro @fcImg - "Badge" avec logo FranceConnect
-
label (string)
optionnal- Texte souhaité, 'Créer', 'Supprimer'...
Les paramètres de la macro @fcMessage - bloc de message avec lien vers le site FranceConnect -
-
label (string)
required(par défaut : 'Créer mon compte avec') : Texte souhaité, 'Créer', 'Supprimer'...
-
url (string)
optionnal- ( par default : 'https://franceconnect.gouv.fr/') Url du lien
-
class (string)
optionnal- ( par default : '') Classes CSS du lien
-
pClass (string)
optionnal( par default : '') : Classes CSS du paragraphe
-
brLink (boolean)
optionnal( par default : true) : Ajoute un saut de ligne après le lien
Exemple
<@cText class='mb-m'>
<@cLink href='http://paris.fr' label='Link primary' target='_blank' class='btn btn-primary' title='Site de la Ville de Paris' />
</@cBlock>
<@cBlock class='mb-m'>
<@cLink href='http://paris.fr' label='Link primary' target='_blank' class='btn btn-primary disabled' title='Site de la Ville de Paris' />
</@cBlock>
<@cBlock class='mb-m'>
<@cLink href='http://fr.lutece.paris.fr' label='Link secondary' target='_blank' class='link-secondary' />
</@cBlock>
<@cBlock class='mb-m'>
<@cLink href='http://fr.lutece.paris.fr' label='Link secondary' target='_blank' class='link-secondary disabled' />
</@cBlock>
<@cBlock class='mb-m'>
<@cLink href='http://paris.fr' label='Decouvrir Paris.fr' class='link-secondary' title='Site de la Ville de Paris' nestedPos='before'>
<@parisIcon name='like' title='information'/>
</@cLink>
</@cBlock>
<@cBlock class='mb-m'>
<@cLink href='http://paris.fr' label='Decouvrir Paris.fr' class='btn btn-action' title='Site de la Ville de Paris' nestedPos='before'>
<@parisIcon name='check' title='information' />
</@cLink>
</@cBlock>
<@cBlock class='mb-m'>
<@cLink href='https://www.ow2.org/' label='OW2' class='btn btn-outline-primary' title='OW2 is an independent, global, open-source software community' target='_blank' />
</@cBlock>
<div class="mb-m">
<a href="http://paris.fr" class="btn btn-primary" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Link primary</span>
</a>
</div>
<div class="mb-m">
<a href="http://paris.fr" class="btn btn-primary disabled" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Link primary</span>
</a>
</div>
<div class="mb-m">
<a href="http://fr.lutece.paris.fr" class="link-secondary" target="_blank" >
<span class="link-label">Link secondary</span>
</a>
</div>
<div class="mb-m">
<!-- Warning : wrong or deprecated argument(s) : titleClass, ... -->
<a href="http://fr.lutece.paris.fr" class="link-secondary disabled" target="_blank" >
<span class="link-label">Link secondary</span>
</a>
</div>
<div class="mb-m">
<a href="http://paris.fr" class="link-secondary" title="Site de la Ville de Paris" >
<svg class="paris-icon paris-icon-like"data-mce-svg="paris-icon paris-icon-like" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-like"></use>
</svg><span class="link-label">Decouvrir Paris.fr</span>
</a>
</div>
<div class="mb-m">
<a href="http://paris.fr" class="btn btn-action" title="Site de la Ville de Paris" >
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-check"></use>
</svg><span class="link-label">Decouvrir Paris.fr</span>
</a>
</div>
<div class="mb-m">
<a href="https://www.ow2.org/" class="btn btn-outline-primary" title="OW2 is an independent, global, open-source software community [New window]" target="_blank" >
<span class="link-label">OW2</span>
</a>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du lien
-
class (string)
optionnal- ajoute une classe CSS au lien. Afin de donner l'illusion d'un bouton, il est possible d'utiliser la classe 'btn' suivi de la classe du bouton souhaité (par exemple: 'btn btn-primary'). Ne pas hésiter à consulter les exemples dans la macro cButton.
-
href (string)
required- permet définir l'url de redirection du lien
-
label (string)
required- permet définir le libellé du lien
-
labelClass (string)
optionnal- permet définir l'attribut 'class' du libellé du lien
-
title (string)
optionnal- permet définir l'attribut 'title' du lien
-
nestedPos (string)
optionnal- permet de définir la position du contenu "#nested"(par défaut: 'after')
-
target (string)
optionnal- permet de définir le type d'ouverture du lien via l'attribut 'target' (valeurs possibles: '_blank', '_top', '_parent' ou 'id')
-
showTarget (boolean)
optionnal- permet d'afficher un icon si target='_blank' (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML au lien
Aide
Consulter aussi sur la page "Formulaires" la macro @cBtn et les icones
Exemple
Liste de fichiers
Liste de liens
<#assign ls = [
{"title":"Page de Paris.fr dédiée aux régles d'urbanisme", "url":"https://paris.fr", "target":"_blank"},
{"title":"Consultation du PLU", "url":"https://www.paris.fr/municipalite", "target":"_blank", "current": 0}
]>
<@cCard title='Liste de liens '>
<@cList ls>
<#-- <@cBadge label='optionnal' class='bg-warning' hasp=false /> -->
<@chItem>
<@cLink href='http://paris.fr' target='_blank' label='Decouvrir Paris.fr' title='Site de la Ville de Paris' />
</@chItem>
</@cList>
<@cList items=ls class='list-highlight-secondary'>
<#-- <@cBadge label='optionnal' class='bg-warning' hasp=false /> -->
<@chItem>
<@cLink href='http://paris.fr' target='_blank' label='Decouvrir Paris.fr' title='Site de la Ville de Paris' />
</@chItem>
</@cList>
</@cCard>
<#assign lsFiles = [
{"title":"Régles d'urbanisme.pdf", "url":"https://paris.fr", "target":"_blank", "size": "80ko", "type":"pdf"},
{"title":"PLU.docx", "url":"https://www.paris.fr/", "target":"", "size": "80ko", "type":"pdf"}
]>
<@cCard title='Liste de fichiers '>
<@cList items=lsFiles type='files' />
<@cList items=lsFiles type='files' class='list-highlight-secondary' />
</@cCard>
<#assign lsall = [
{"title":"Tout sur le théme", "url":"https://teleservices2.rec.apps.paris.fr/forms", "target":"_blank"},
{"title":"Tout sur Lutéce", "url":"https://lutece.paris.fr/", "target":"","current": 0},
{"title":"Tout sur ma mére", "url":"https://www.allocine.fr/film/fichefilm_gen_cfilm=7868.html", "target":"", "current": 0}
{"title":"Tout sur le théme", "url":"https://teleservices2.rec.apps.paris.fr/forms", "target":"_blank"},
{"title":"Tout sur Lutéce", "url":"https://lutece.paris.fr/", "target":"","current": 0},
{"title":"Tout sur ma mére", "url":"https://www.allocine.fr/film/fichefilm_gen_cfilm=7868.html", "target":"", "current": 0}
]>
<@cCard title='Liste de liens'>
<@cList items=lsall type='more' itemsShown=3 />
</@cCard>
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Liste de liens </h3>
<ul class="custom-list list-default" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Page de Paris.fr dédiée aux régles d'urbanisme" target="_blank">
<span>Page de Paris.fr dédiée aux régles d'urbanisme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/municipalite" title="Consultation du PLU" target="_blank">
<span>Consultation du PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</li>
</ul>
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Page de Paris.fr dédiée aux régles d'urbanisme" target="_blank">
<span>Page de Paris.fr dédiée aux régles d'urbanisme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/municipalite" title="Consultation du PLU" target="_blank">
<span>Consultation du PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</li>
</ul>
</div>
</div>
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Liste de fichiers </h3>
<ul class="custom-list list-files" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Régles d'urbanisme.pdf" target="_blank" download="Régles_d_urbanisme.pdf">
<span>Régles d'urbanisme.pdf </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text"></use>
</svg> </div>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx">
<span>PLU.docx </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text"></use>
</svg> </div>
</a>
</li>
</ul>
<ul class="custom-list list-files list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Régles d'urbanisme.pdf" target="_blank" download="Régles_d_urbanisme.pdf">
<span>Régles d'urbanisme.pdf </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text"></use>
</svg> </div>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx">
<span>PLU.docx </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text"></use>
</svg> </div>
</a>
</li>
</ul>
</div>
</div>
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Liste de liens</h3>
<ul class="custom-list list-more more-list" >
<li class="custom-list-item ">
<a class="list-info" href="https://teleservices2.rec.apps.paris.fr/forms" title="Tout sur le théme" target="_blank">
<span>Tout sur le théme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://lutece.paris.fr/" title="Tout sur Lutéce" >
<span>Tout sur Lutéce </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.allocine.fr/film/fichefilm_gen_cfilm=7868.html" title="Tout sur ma mére" >
<span>Tout sur ma mére </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://teleservices2.rec.apps.paris.fr/forms" title="Tout sur le théme" target="_blank">
<span>Tout sur le théme </span>
</a>
</li>
<li class="custom-list-item extra hidden">
<a class="list-info" href="https://lutece.paris.fr/" title="Tout sur Lutéce" >
<span>Tout sur Lutéce </span>
</a>
</li>
<li class="custom-list-item extra hidden">
<a class="list-info" href="https://www.allocine.fr/film/fichefilm_gen_cfilm=7868.html" title="Tout sur ma mére" >
<span>Tout sur ma mére </span>
</a>
</li>
<li class="more">
<a href="#" class="btn-more" title="Show more" data-plus="Show more" data-minus="Close" >
<svg xmlns="http://www.w3.org/2000/svg" class="plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="minus" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /></svg>
<span class="link-label">Show more</span>
</a>
</li>
</ul>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID de la liste
-
class (string)
optionnal- ajoute une classe CSS à la liste
-
items (object)
required- Objet list avec items de menu. L'objet contient un attribut 'titre', un attribut 'url' et un attribut 'target'
-
itemsShown (number)
optionnal- définit le nombre d'item de list affiché pour liste 'more' (par défaut: 0)
-
indexShown (boolean)
optionnal- affiche un index (par défaut: false)
-
labelMore (string)
optionnal- définit le libellé d'ouverture pour le type de liste 'more' (par défaut: i18n("themeparisfr.labelShowMore"))
-
labelClose (string)
optionnal- définit le libellé de fermeture pour le type de liste 'more' (par défaut: i18n("themeparisfr.labelClose"))
-
type (string)
optionnal- définit le type de liste (par défaut: 'default', valeurs possible: 'default', 'more', 'files')
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la liste
Il est possible de changer la puce d'un item de liste en ajoutant un attribut "class" à chaque item. Il faut ajouter pour nom de classe l'une des valeurs suivantes disponible: arrow, arobase, screen. Pour étendre la liste des illustration, il faut ajouter dans une css le code suivant:
/* Default list [name] item icon */
.custom-list.list-default li.yourclassname::after {
/* Add content in url encoded SVG format */
content: url(data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2215%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-2-2h24v24H-2z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M10.72.03A9.991%209.991%200%2000.03%2010.72C.39%2016.01%205.01%2020%2010.31%2020H14c.55%200%201-.45%201-1s-.45-1-1-1h-3.67c-3.73%200-7.15-2.42-8.08-6.03C.76%206.17%206.16.76%2011.96%202.26%2015.58%203.18%2018%206.6%2018%2010.33v1.1c0%20.79-.71%201.57-1.5%201.57s-1.5-.78-1.5-1.57v-1.25c0-2.51-1.78-4.77-4.26-5.12a5.008%205.008%200%2000-5.66%205.87%204.996%204.996%200%20003.72%203.94c1.84.43%203.59-.16%204.74-1.33.89%201.22%202.67%201.86%204.3%201.21%201.34-.53%202.16-1.9%202.16-3.34v-1.09C20%205.01%2016.01.39%2010.72.03zM10%2013c-1.66%200-3-1.34-3-3s1.34-3%203-3%203%201.34%203%203-1.34%203-3%203z%22%20fill%3D%22%23071f32%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E);
/* Any CSS values needed.. */
}
.custom-list.list-default li.yourclassname:hover::after {
/* Add content in url encoded SVG format */
content: url(data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2215%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-2-2h24v24H-2z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M10.72.03A9.991%209.991%200%2000.03%2010.72C.39%2016.01%205.01%2020%2010.31%2020H14c.55%200%201-.45%201-1s-.45-1-1-1h-3.67c-3.73%200-7.15-2.42-8.08-6.03C.76%206.17%206.16.76%2011.96%202.26%2015.58%203.18%2018%206.6%2018%2010.33v1.1c0%20.79-.71%201.57-1.5%201.57s-1.5-.78-1.5-1.57v-1.25c0-2.51-1.78-4.77-4.26-5.12a5.008%205.008%200%2000-5.66%205.87%204.996%204.996%200%20003.72%203.94c1.84.43%203.59-.16%204.74-1.33.89%201.22%202.67%201.86%204.3%201.21%201.34-.53%202.16-1.9%202.16-3.34v-1.09C20%205.01%2016.01.39%2010.72.03zM10%2013c-1.66%200-3-1.34-3-3s1.34-3%203-3%203%201.34%203%203-1.34%203-3%203z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E);
/* Any CSS values needed.. */
}
Exemple
<@cList>
<@cListItem>
<@cLink href='http://paris.fr' target='_blank' label='Decouvrir Paris.fr' title='Site de la Ville de Paris' />
</@cListItem>
</@cList>
<ul class="custom-list list-default" >
<li class="custom-list-item">
<a href="http://paris.fr" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</li>
</ul>Paramètres
Voici la liste des différents paramètres de la macro :
-
url (string)
optionnal- Défaut '', Url pour le lien contenu dans l'item
-
label (string)
optionnal- Default '', libellé du lien
-
title (string)
optionnal- Défaut '', attribut title du lien
-
target (string)
optionnal- Défaut '', attribut target du lien
-
id (string)
optionnal- l'ID de la liste
-
class (string)
optionnal- ajoute une classe CSS à la liste
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la liste
Lien contenu dans un élément "@cList". Utilisable dans la macro @cList si on n'utilise pas de JSON pour fournir les items de liste.
Exemple
<@cErrorMessage title='Erreur Enorme' text='Grossière erreur tout est à revoir' linkUrl='.' linkLabelUrl='On y va !' />
<div class="container d-flex align-items-center justify-content-center vh-50">
<div class="row ">
<div class="col ">
<div class="alert alert-outline alert-danger" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-2045911000459651" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-2045911000459651">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Erreur Enorme</p>
</div>
</div>
<div class="alert-content">
<p>
Grossière erreur tout est à revoir</p>
</div>
</div>
<ul class="list-unstyled d-flex justify-content-center gap-2 mt-l" >
<li>
<a href="." class="btn btn-secondary" >
<span class="link-label">Home</span>
</a>
</li>
<li>
<a href="." class="btn btn-primary" >
<span class="link-label">On y va !</span>
</a>
</li>
</ul>
</div>
</div>
</div>Paramètres
Gestion des messages d'erreur
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID du message d'erreur
-
class (string)
optionnal- ajoute une classe CSS au message d'erreur
-
title (string)
required- permet de définir le titre du message d'erreur
-
text (string)
required- permet de définir le texte du message d'erreur
-
linkUrl (string)
optionnal- permet d'ajouter un lien après le texte du message d'erreur
-
linkLabelUrl (string)
optionnal- permet de définir le label du lien du message d'erreur
-
params (string)
optionnal- permet d'ajouter des parametres HTML au message d'erreur
Exemple
Filtre avancé
FILTRES
44 résultats
Filtres
FILTRES
FILTRES - avec sélections
<#assign checkboxes = [
{"title":"Filter 1", "id":"filter1"},
{"title":"Filter 2", "id":"filter2"},
{"title":"Filter 3", "id":"filter3"}
]>
<@cContainer>
<@cTitle level=3>Filtre avancé</@cTitle>
<@cRow>
<@cCol>
<@cCard class='bg-white'>
<@cBlock class='card-title-container'>
<@cTitle level=4>FILTRES</@cTitle>
</@cBlock>
<@cFilter checkboxes=checkboxes result='44 résultats' />
</@cCard>
</@cCol>
</@cRow>
<@cTitle level=3>Filtre</@cTitle>
<@cRow>
<@cCol>
<@cCard class='bg-white'>
<@cBlock class='card-title-container'>
<@cTitle level=4>FILTRES</@cTitle>
</@cBlock>
<@cForm name='info'>
<@cRow>
<@cCol>
<#assign lData><@cText type='small' class="text-muted">(Nom de la discipline)</@cText></#assign>
<@cField label='Discipline' for='name' labelData=lData>
<@cInput name='fname' placeholder='Exemple: Football' />
<@cFormHelp id='fname' label='Saisir un nom de discipline' />
</@cField>
</@cCol>
</@cRow>
<@cFieldset legend='Horaire'>
<@cRow>
<@cCol params=' aria-describedby="radioHelpHoraire"'>
<@cField>
<@cCheckbox name='horaire' id='matin' label='Matin' value='matin' />
<@cCheckbox name='horaire' id='aprem' label='Après-midi' value='aprem' />
<@cCheckbox name='horaire' id='jour' label='Journée' value='jour' />
<@cFormHelp id='radioHelpHoraire' label='Choisir un horaire' />
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
<@cRow>
<@cCol>
<@cField label='Commune'>
<@cSelect name=''>
<@cOption label='' value='0' />
<@cOption label='Paris (75000)' value='1' />
<@cOption label='Parigné-l\'Eveque (72250)' value='2' selected=true />
<@cOption label='Parigné (35133)' value='3' />
<@cOption label='Parigné-le-Polin (72330)' value='4' />
</@cSelect>
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<#assign badge><@cBadge class='bg-secondary ms-xs' params='aria-label="5 resultats pour les Arts Martiaux"'>5</@cBadge></#assign>
<@cAccordion id='sport1' title='Arts martiaux ${badge}'>
<@cFieldset legend='Discipline'>
<@cField>
<@cCheckbox name='sport' id='karate' label='Karate' value='karate' />
<@cCheckbox name='sport' id='judo' label='Judo' value='judo' />
<@cCheckbox name='sport' id='natation' label='Natation' value='nata' />
</@cField>
</@cFieldset>
</@cAccordion>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cAccordion id='sport2' title='Sport collectifs' class='mt-xs' state=false>
<@cFieldset legend='Horaire'>
<@cField>
<@cCheckbox name='sport' id='football' label='Football' value='foot' />
<@cCheckbox name='sport' id='rugby' label='Rugby' value='rugby' />
<@cCheckbox name='sport' id='volley' label='Volley Ball' value='volley' />
<@cCheckbox name='sport' id='hand' label='Hand Ball' value='hand' />
</@cField>
</@cFieldset>
</@cAccordion>
</@cCol>
</@cRow>
</@cForm>
</@cCard>
</@cCol>
<@cCol>
<@cCard class='bg-white'>
<@cBlock class='card-title-container'>
<@cTitle level=4>FILTRES</@cTitle>
</@cBlock>
<@cText>
<@cBtn label='Matin' type='button' nestedPos='after' >
<@parisIcon name='close' />
</@cBtn>
<@cBtn label='Karate' type='button' nestedPos='after' >
<@parisIcon name='close' />
</@cBtn>
</@cText>
<@cForm name='info'>
<@cRow>
<@cCol>
<#assign lData><@cText type='small' class="text-muted">(Nom de la discipline)</@cText></#assign>
<@cField label='Discipline' for='name' labelData=lData>
<@cInput name='fname' placeholder='Exemple: Football' />
<@cFormHelp id='fname' label='Saisir un nom de discipline' />
</@cField>
</@cCol>
</@cRow>
<@cFieldset legend='Horaire'>
<@cRow>
<@cCol params=' aria-describedby="radioHelpHoraire"'>
<@cField>
<@cCheckbox name='horaire' id='matin2' label='Matin' value='matin' checked=true />
<@cCheckbox name='horaire' id='aprem2' label='Après-midi' value='aprem' />
<@cCheckbox name='horaire' id='jour2' label='Journée' value='jour' />
<@cFormHelp id='radioHelpHoraire' label='Choisir un horaire' />
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
<@cRow>
<@cCol>
<@cField label='Commune'>
<@cSelect name=''>
<@cOption label='' value='0' />
<@cOption label='Paris (75000)' value='1' />
<@cOption label='Parigné-l\'Eveque (72250)' value='2' selected=true />
<@cOption label='Parigné (35133)' value='3' />
<@cOption label='Parigné-le-Polin (72330)' value='4' />
</@cSelect>
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<#assign badge><@cBadge class='bg-secondary ms-xs' params='aria-label="5 resultats pour les Arts Martiaux"'>5</@cBadge></#assign>
<@cAccordion id='sport1' title='Arts martiaux ${badge}'>
<@cFieldset legend='Discipline'>
<@cField>
<@cCheckbox name='sport' id='karate2' label='Karate' value='karate' checked=true />
<@cCheckbox name='sport' id='judo2' label='Judo' value='judo' />
<@cCheckbox name='sport' id='natation2' label='Natation' value='nata' />
</@cField>
</@cFieldset>
</@cAccordion>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cAccordion id='sport2' title='Sport collectifs' class='mt-xs' state=false>
<@cFieldset legend='Horaire'>
<@cField>
<@cCheckbox name='sport' id='football' label='Football' value='foot' />
<@cCheckbox name='sport' id='rugby' label='Rugby' value='rugby' />
<@cCheckbox name='sport' id='volley' label='Volley Ball' value='volley' />
<@cCheckbox name='sport' id='hand' label='Hand Ball' value='hand' />
</@cField>
</@cFieldset>
</@cAccordion>
</@cCol>
</@cRow>
</@cForm>
</@cCard>
</@cCol>
</@cRow>
</@cContainer>
<div class="container ">
<h3>
Filtre avancé</h3>
<div class="row ">
<div class="col ">
<div class="card bg-white">
<div class="card-body">
<div class="card-title-container">
<h4>
FILTRES</h4>
</div>
<div class="container ">
<div class="row justify-content-between align-items-center">
<span class="filter-result">
44 résultats</span>
<button class="btn btn-secondary m-1 d-flex align-items-center w-auto" type="submit" id="filter-toggle-button">
<svg class="paris-icon paris-icon-filter main-info-color me-3"data-mce-svg="paris-icon paris-icon-filter" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-filter"></use>
</svg><span class="btn-label ">Masquer les filtres</span>
</button>
</div>
<div class="row " id="filters-container">
<fieldset class="d-flex m-0 flex-wrap w-auto" id="fieldset-id-2090639906809711" role="group" aria-labelledby="legend-id-2090639906809711">
<legend class="visually-hidden" id="legend-id-2090639906809711" >Liste de filtres</legend>
<div class=" form-check btn-filter btn-selection">
<div class="selection-check">
<input type="checkbox" id="filter1" name="selectCheckbox" class="form-check-input" value="filter">
<label class="form-label form-check-label" for="filter1">
Filter 1
</label>
</div>
</div>
<div class=" form-check btn-filter btn-selection">
<div class="selection-check">
<input type="checkbox" id="filter2" name="selectCheckbox" class="form-check-input" value="filter">
<label class="form-label form-check-label" for="filter2">
Filter 2
</label>
</div>
</div>
<div class=" form-check btn-filter btn-selection">
<div class="selection-check">
<input type="checkbox" id="filter3" name="selectCheckbox" class="form-check-input" value="filter">
<label class="form-label form-check-label" for="filter3">
Filter 3
</label>
</div>
</div>
</fieldset>
<button class="btn btn-primary w-auto" type="submit">
<span class="btn-label ">Rechercher</span>
</button>
<button class="btn btn-tertiary w-auto" type="submit" id="filter-erase-button">
<span class="btn-label ">Tout effacer</span>
</button>
</div>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-filter.js"></script>
</div>
</div>
</div>
</div>
<h3>
Filtres</h3>
<div class="row ">
<div class="col ">
<div class="card bg-white">
<div class="card-body">
<div class="card-title-container">
<h4>
FILTRES</h4>
</div>
<form method="post" name="info">
<div class="row ">
<div class="col ">
<label class="form-label" for="name">
Discipline
<small class="text-muted">
(Nom de la discipline)</small>
</label>
<p class="form-text " id="help_fname">
Saisir un nom de discipline</p>
<input type="text" class=" form-control" name="fname" id="fname" value="" placeholder="Exemple: Football" aria-label="Exemple: Football">
</div>
</div>
<fieldset id="fieldset-id-2094124846051381" role="group" aria-labelledby="legend-id-2094124846051381">
<legend id="legend-id-2094124846051381" >Horaire</legend>
<div class="row ">
<div class="col " aria-describedby="radioHelpHoraire">
<p class="form-text " id="help_radioHelpHoraire">
Choisir un horaire</p>
<div class="form-check">
<input type="checkbox" id="matin" name="horaire" class="form-check-input" value="matin">
<label class="form-label form-check-label" for="matin">
Matin
</label>
</div>
<div class="form-check">
<input type="checkbox" id="aprem" name="horaire" class="form-check-input" value="aprem">
<label class="form-label form-check-label" for="aprem">
Après-midi
</label>
</div>
<div class="form-check">
<input type="checkbox" id="jour" name="horaire" class="form-check-input" value="jour">
<label class="form-label form-check-label" for="jour">
Journée
</label>
</div>
</div>
</div>
</fieldset>
<div class="row ">
<div class="col ">
<label class="form-label">
Commune
</label>
<select name="" class="form-select">
<option value="0"></option>
<option value="1">Paris (75000)</option>
<option value="2" selected>Parigné-l'Eveque (72250)</option>
<option value="3">Parigné (35133)</option>
<option value="4">Parigné-le-Polin (72330)</option>
</select>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="accordion " id="accsport1-1" >
<div class="card " >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccsport1-1" aria-expanded="true" aria-controls="collapseAccsport1-1">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccsport1-1" aria-expanded="true" aria-controls="collapseAccsport1-1" aria-labelledby="headingAccsport1-1">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccsport1-1">Arts martiaux
<div class="badge bg-secondary ms-xs" aria-label="5 resultats pour les Arts Martiaux">
<p class="badge-label"></p>
5</div>
</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccsport1-1" class="m-0 collapse show" role="region" aria-labelledby="headingAccsport1-1" data-parent="#accsport1-1">
<div class="card-body">
<fieldset id="fieldset-id-2101094724534721" role="group" aria-labelledby="legend-id-2101094724534721">
<legend id="legend-id-2101094724534721" >Discipline</legend>
<div class="form-check">
<input type="checkbox" id="karate" name="sport" class="form-check-input" value="karate">
<label class="form-label form-check-label" for="karate">
Karate
</label>
</div>
<div class="form-check">
<input type="checkbox" id="judo" name="sport" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="judo">
Judo
</label>
</div>
<div class="form-check">
<input type="checkbox" id="natation" name="sport" class="form-check-input" value="nata">
<label class="form-label form-check-label" for="natation">
Natation
</label>
</div>
</fieldset>
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccsport1-1" aria-expanded="true" aria-controls="collapseAccsport1-1">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="accordion " id="accsport2-2" >
<div class="card mt-xs" >
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccsport2-2" aria-expanded="false" aria-controls="collapseAccsport2-2">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccsport2-2" aria-expanded="false" aria-controls="collapseAccsport2-2" aria-labelledby="headingAccsport2-2">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccsport2-2">Sport collectifs</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccsport2-2" class="m-0 collapse " role="region" aria-labelledby="headingAccsport2-2" data-parent="#accsport2-2">
<div class="card-body">
<fieldset id="fieldset-id-2108064603018061" role="group" aria-labelledby="legend-id-2108064603018061">
<legend id="legend-id-2108064603018061" >Horaire</legend>
<div class="form-check">
<input type="checkbox" id="football" name="sport" class="form-check-input" value="foot">
<label class="form-label form-check-label" for="football">
Football
</label>
</div>
<div class="form-check">
<input type="checkbox" id="rugby" name="sport" class="form-check-input" value="rugby">
<label class="form-label form-check-label" for="rugby">
Rugby
</label>
</div>
<div class="form-check">
<input type="checkbox" id="volley" name="sport" class="form-check-input" value="volley">
<label class="form-label form-check-label" for="volley">
Volley Ball
</label>
</div>
<div class="form-check">
<input type="checkbox" id="hand" name="sport" class="form-check-input" value="hand">
<label class="form-label form-check-label" for="hand">
Hand Ball
</label>
</div>
</fieldset>
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccsport2-2" aria-expanded="false" aria-controls="collapseAccsport2-2">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col ">
<div class="card bg-white">
<div class="card-body">
<div class="card-title-container">
<h4>
FILTRES - avec sélections</h4>
</div>
<p>
<button class="btn btn-primary" type="button">
<span class="btn-label ">Matin</span>
<svg class="paris-icon paris-icon-close"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
<button class="btn btn-primary" type="button">
<span class="btn-label ">Karate</span>
<svg class="paris-icon paris-icon-close"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<form method="post" name="info">
<div class="row ">
<div class="col ">
<label class="form-label" for="name">
Discipline
<small class="text-muted">
(Nom de la discipline)</small>
</label>
<p class="form-text " id="help_fname1">
Saisir un nom de discipline</p>
<input type="text" class=" form-control" name="fname" id="fname1" value="" placeholder="Exemple: Football" aria-label="Exemple: Football">
</div>
</div>
<fieldset id="fieldset-id-2118519420743071" role="group" aria-labelledby="legend-id-2118519420743071">
<legend id="legend-id-2118519420743071" >Horaire</legend>
<div class="row ">
<div class="col " aria-describedby="radioHelpHoraire">
<p class="form-text " id="help_radioHelpHoraire">
Choisir un horaire</p>
<div class="form-check">
<input type="checkbox" id="matin2-1" name="horaire" class="form-check-input" value="matin" checked>
<label class="form-label form-check-label" for="matin2-1">
Matin
</label>
</div>
<div class="form-check">
<input type="checkbox" id="aprem2-1" name="horaire" class="form-check-input" value="aprem">
<label class="form-label form-check-label" for="aprem2-1">
Après-midi
</label>
</div>
<div class="form-check">
<input type="checkbox" id="jour2-1" name="horaire" class="form-check-input" value="jour">
<label class="form-label form-check-label" for="jour2-1">
Journée
</label>
</div>
</div>
</div>
</fieldset>
<div class="row ">
<div class="col ">
<label class="form-label">
Commune
</label>
<select name="" class="form-select">
<option value="0"></option>
<option value="1">Paris (75000)</option>
<option value="2" selected>Parigné-l'Eveque (72250)</option>
<option value="3">Parigné (35133)</option>
<option value="4">Parigné-le-Polin (72330)</option>
</select>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="accordion " id="accsport1" >
<div class="card " >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccsport1" aria-expanded="true" aria-controls="collapseAccsport1">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccsport1" aria-expanded="true" aria-controls="collapseAccsport1" aria-labelledby="headingAccsport1">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccsport1">Arts martiaux
<div class="badge bg-secondary ms-xs" aria-label="5 resultats pour les Arts Martiaux">
<p class="badge-label"></p>
5</div>
</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccsport1" class="m-0 collapse show" role="region" aria-labelledby="headingAccsport1" data-parent="#accsport1">
<div class="card-body">
<fieldset id="fieldset-id-2127489299226411" role="group" aria-labelledby="legend-id-2127489299226411">
<legend id="legend-id-2127489299226411" >Discipline</legend>
<div class="form-check">
<input type="checkbox" id="karate2" name="sport" class="form-check-input" value="karate" checked>
<label class="form-label form-check-label" for="karate2">
Karate
</label>
</div>
<div class="form-check">
<input type="checkbox" id="judo2" name="sport" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="judo2">
Judo
</label>
</div>
<div class="form-check">
<input type="checkbox" id="natation2" name="sport" class="form-check-input" value="nata">
<label class="form-label form-check-label" for="natation2">
Natation
</label>
</div>
</fieldset>
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccsport1" aria-expanded="true" aria-controls="collapseAccsport1">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="accordion " id="accsport2" >
<div class="card mt-xs" >
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccsport2" aria-expanded="false" aria-controls="collapseAccsport2">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccsport2" aria-expanded="false" aria-controls="collapseAccsport2" aria-labelledby="headingAccsport2">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccsport2">Sport collectifs</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccsport2" class="m-0 collapse " role="region" aria-labelledby="headingAccsport2" data-parent="#accsport2">
<div class="card-body">
<fieldset id="fieldset-id-2136459177709751" role="group" aria-labelledby="legend-id-2136459177709751">
<legend id="legend-id-2136459177709751" >Horaire</legend>
<div class="form-check">
<input type="checkbox" id="football" name="sport" class="form-check-input" value="foot">
<label class="form-label form-check-label" for="football">
Football
</label>
</div>
<div class="form-check">
<input type="checkbox" id="rugby" name="sport" class="form-check-input" value="rugby">
<label class="form-label form-check-label" for="rugby">
Rugby
</label>
</div>
<div class="form-check">
<input type="checkbox" id="volley" name="sport" class="form-check-input" value="volley">
<label class="form-label form-check-label" for="volley">
Volley Ball
</label>
</div>
<div class="form-check">
<input type="checkbox" id="hand" name="sport" class="form-check-input" value="hand">
<label class="form-label form-check-label" for="hand">
Hand Ball
</label>
</div>
</fieldset>
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccsport2" aria-expanded="false" aria-controls="collapseAccsport2">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>Paramètres
Filtres avancés
Voici la liste des différents paramètres de la macro "cFilter" exemple "Filtres avancés".
-
id (string)
optionnal- l'ID du filtre
-
class (string)
optionnal- ajoute une classe CSS au filtre
-
checkboxes (object)
required- Objet list avec items de filtre. L'objet contient un attribut 'title' et un attribut 'id'
-
result (string)
optionnal- permet d'afficher le resultat du filtre avec une variable dynamique
-
fieldSetLabel (string)
optionnal- permet de définir le libellé du fieldset des filtres (par défaut: 'Liste de filtres')
-
showLegend (boolean)
optionnal- permet si la légende est affichée, par défaut false
-
params (string)
optionnal- permet d'ajouter des parametres HTML au filtre
Filtres
L'exemple "Filtres" est lui un assemblage de plusieurs composants et peut être utilisé comme dans l'exemple page "Recherches / Filtres"
Exemple
Contenu Tab 1
Contenu Tab 2
Contenu Tab 3
Contenu Tab 4
Contenu Tab 5
<@cTabs>
<@cTab url='#TabContent1' active=true>Onglet 1</@cTab>
<@cTab url='#TabContent2'>Onglet 2 </@cTab>
<@cTab url='#TabContent3'>Onglet 3</@cTab>
<@cTab url='#TabContent4' disabled=true>Onglet 4</@cTab>
</@cTabs>
<@cTabContent id='myContent'>
<@cTabPane title='Onglet 1' id='TabContent1' active=true>
<@cText>Contenu Tab 1</@cText>
</@cTabPane>
<@cTabPane title='Onglet 2' id='TabContent2'>
<@cText>Contenu Tab 2</@cText>
</@cTabPane>
<@cTabPane title='Onglet 3 avec plus de 20 caractères et ellipsis' id='TabContent3'>
<@cText>Contenu Tab 3</@cText>
</@cTabPane>
<@cTabPane title='Onglet 4' id='TabContent4' disabled=true>
<@cText>Contenu Tab 4</@cText>
</@cTabPane>
</@cTabContent>
<div class="nav-tabs-container">
<div class="nav nav-tabs" id="tabSample1" role="tablist" >
<button type="button" id="tab_TabContent1" aria-controls="TabContent1" data-bs-toggle="tab" role="tab" data-bs-target="#TabContent1" class="nav-link active" aria-selected="true">
Onglet 1</button>
<button type="button" id="tab_TabContent2" aria-controls="TabContent2" data-bs-toggle="tab" role="tab" data-bs-target="#TabContent2" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 2 </button>
<button type="button" id="tab_TabContent3" aria-controls="TabContent3" data-bs-toggle="tab" role="tab" data-bs-target="#TabContent3" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 3</button>
<button type="button" id="tab_TabContent4" aria-controls="TabContent4" data-bs-toggle="tab" role="tab" data-bs-target="#TabContent4" class="nav-link disabled" disabled tabindex="-1" aria-disabled="true" aria-selected="false">
Onglet 4</button>
<button type="button" id="tab_TabContent5" aria-controls="TabContent5" data-bs-toggle="tab" role="tab" data-bs-target="#TabContent5" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 5</button>
</div>
</div>
<div class="tab-content " id="myContent">
<div class="card tab-pane fade show active" id="TabContent1" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent1" >
<div class="card-body">
<p>
Contenu Tab 1</p>
</div>
</div>
<div class="card tab-pane fade" id="TabContent2" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent2" >
<div class="card-body">
<p>
Contenu Tab 2</p>
</div>
</div>
<div class="card tab-pane fade" id="TabContent3" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent3" >
<div class="card-body">
<p>
Contenu Tab 3</p>
</div>
</div>
<div class="card tab-pane fade disabled" disabled aria-disabled="true" id="TabContent4" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent4" >
<div class="card-body">
<p>
Contenu Tab 4</p>
</div>
</div>
<div class="card tab-pane fade" id="TabContent5" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent5" >
<div class="card-body">
<p>
Contenu Tab 5</p>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectResponsiveTabs" name="selectResponsiveTabs" class="form-check-input" value="1">
<label class="form-label form-check-label" for="selectResponsiveTabs">
Mode responsive alternatif
<p class="selection-subtitle my-sm">Modifier le mode responsive.<br> Si coché ajoute la class "tabs-list" à la macro cTabs.</p>
</label>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const checkbox = document.getElementById('selectResponsiveTabs');
const tabSample = document.getElementById('tabSample1');
if (checkbox && tabSample) {
checkbox.addEventListener('change', function() {
if (this.checked) {
tabSample.classList.add('tabs-list');
} else {
tabSample.classList.remove('tabs-list');
}
});
}
});
</script>Paramètres
Les paramètres cTabs
-
id (string)
optionnal- l'ID des onglets
-
class (string)
optionnal- ajoute une classe CSS aux onglets
-
navigation (boolean)
optionnal- permet d'intégrer les onglets dans une balise HTML 'nav'
-
params (string)
optionnal- permet d'ajouter des parametres HTML aux onglets
Les paramètres cTab
-
id (string)
optionnal- l'ID de l'onglet
-
class (string)
optionnal- ajoute une classe CSS à l'onglet
-
url (string)
required- utilisé pour définir l'id de l'onglet, et permet de définir le lien de l'onglet dans le cas où le parametre 'navigation' est true
-
navigation (boolean)
optionnal- permet d'intégrer l'onglet dans une balise HTML 'li'
-
active (boolean)
optionnal- permet de définir si l'onglet est actif au chargement de la page (par défaut: false)
-
disabled (boolean)
optionnal- permet de définir si l'onglet est désactivé (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML à l'onglet
Les paramètres cTabContent
-
id (string)
required- l'ID du container
-
class (string)
optionnal- ajoute une classe CSS au container
-
params (string)
optionnal- permet d'ajouter des parametres HTML au container
Les paramètres cTabPane
-
id (string)
required- l'ID du panneau (doit etre similaire à celui de l'onglet référent)
-
class (string)
optionnal- ajoute une classe CSS au panneau
-
bodyClass (string)
optionnal- ajoute une classe CSS au body
-
title (string)
optionnal- permet de définir le titre du panneau affiché en mobile
-
titleLevel (number)
optionnal- permet de définir le niveau de titre du panneau (par défaut: 3)
-
active (boolean)
optionnal- permet de définir si le panneau est actif au chargement de la page (par défaut: false)
-
disabled (boolean)
optionnal- permet de définir si le panneau est désactivé (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML à l'onglet
Aide
Les macros cTabs et cTab permettent de créer des onglets de navigation. En association avec les macros cTabContent et cTabPane elles permettent de créer des onglets avec contenus.
Références : components/navs/#regarding-accessibility et https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role
Exemple
<@cPagination paginator=pageList label='Liste des pages' />
<nav aria-label="Pagination">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="jsp/site/Portal.jsp?page_id=6#section-pagination">
<svg class="paris-icon paris-icon-arrow-left"data-mce-svg="paris-icon paris-icon-arrow-left" focusable="false" role="img">
<use href="#paris-icon-arrow-left"></use>
</svg> </a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" title="page 1 sur 5 - active" href="jsp/site/Portal.jsp?page_id=6#section-pagination">1<span class="visually-hidden"> - active</span></a>
</li>
<li class="page-item" >
<a class="page-link" title="page 2 sur 5" href="jsp/site/Portal.jsp?page_id=6#section-pagination">2</a>
</li>
<li class="page-item" >
<a class="page-link cesure" title="cesure" href="jsp/site/Portal.jsp?page_id=6#section-pagination">...</a>
</li>
<li class="page-item">
<a class="page-link" href="jsp/site/Portal.jsp?page_id=6#section-pagination">
<svg class="paris-icon paris-icon-arrow-right"data-mce-svg="paris-icon paris-icon-arrow-right" focusable="false" role="img">
<use href="#paris-icon-arrow-right"></use>
</svg> </a>
</li>
</ul>
</nav>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
optionnal- l'ID de la pagination
-
class (string)
optionnal- ajoute une classe CSS à la pagination
-
paginator(list)
required- Objet Paginator du core LUTECE ou liste avec comme attributs les url et index de pagination.
-
label (string)
optionnal- permet de définir un libellé à la pagination (par défaut: 'Pagination')
-
fragment (string)
optionnal- permet d'ajouter un suffixe à l'url de la page
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la pagination
Aide
Ce composant fait appel a une deuxiéme macro "cPaginationLinks" -avec pour paramètres la liste des pages "pages" et le paramétre classe CSS "class"- pour construire les liens.
Exemple
Title 1
Content 1
Title 2
Content 2
Title 3
Content 3
Title 4
Content 4
Title 5
Content 5
Title 6
Content 6
Le slider exemple n'est pas opérationnel. Seul l'aspect graphique est présenté ici !
<#assign mySlides = [
{"content":"Content 1","linkLabel":"Title 1", "img":"images/paul-dufour-5XndD3FhH-w-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 2", "linkLabel":"Title 2", "img":"images/adrien-xplr-wAScP0OY-yM-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 3", "linkLabel":"Title 3", "img":"images/alexander-kagan-t9Td0zfDTwI-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 4", "linkLabel":"Title 4", "img":"images/paul-dufour-5XndD3FhH-w-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 5", "linkLabel":"Title 5", "img":"images/adrien-xplr-wAScP0OY-yM-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 6", "linkLabel":"Title 6", "img":"images/alexander-kagan-t9Td0zfDTwI-unsplash.png", "link":"https://paris.fr"}
]>
<@cSlider id='myslider' sliderLabel='Liens divers' slides=mySlides />
<section class="themeparisfr-slider-wrapper" id="myslider" aria-roledescription="slide" aria-label="Liens divers" >
<div class="row themeparisfr-slider row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4" id="myslider-theme-slider" aria-live="off">
<div class="card slide p-0" role="group" aria-roledescription="slide" aria-label="1 sur 6" >
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title 1</h3>
<p class="card-text">Content 1</p>
</div>
</div>
<div class="card slide p-0" role="group" aria-roledescription="slide" aria-label="2 sur 6" >
<figure class="card-figure ">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title 2</h3>
<p class="card-text">Content 2</p>
</div>
</div>
<div class="card slide p-0" role="group" aria-roledescription="slide" aria-label="3 sur 6" >
<figure class="card-figure ">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title 3</h3>
<p class="card-text">Content 3</p>
</div>
</div>
<div class="card slide p-0" role="group" aria-roledescription="slide" aria-label="4 sur 6" >
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title 4</h3>
<p class="card-text">Content 4</p>
</div>
</div>
<div class="card slide p-0" role="group" aria-roledescription="slide" aria-label="5 sur 6" >
<figure class="card-figure ">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title 5</h3>
<p class="card-text">Content 5</p>
</div>
</div>
<div class="card slide p-0" role="group" aria-roledescription="slide" aria-label="6 sur 6" >
<figure class="card-figure ">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" alt="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title 6</h3>
<p class="card-text">Content 6</p>
</div>
</div>
</div>
<div class="slider-buttons">
<div class="container ">
<div class="d-flex justify-content-end pt-4 pb-md-5 mb-md-5">
<div class="d-flex align-items-center justify-content-end gap-1 test">
<button class="btn btn-light rounded-circle disabled prev-slide" type="button"tabindex="0" aria-controls="myslider-theme-slider" aria-label="Previous slide" disabled>
<svg class="paris-icon paris-icon-arrow-left"data-mce-svg="paris-icon paris-icon-arrow-left" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-left"></use>
</svg>
</button>
<button class="btn btn-light rounded-circle ms-sm next-slide" type="button"tabindex="0" aria-controls="myslider-theme-slider" aria-label="Next slide">
<svg class="paris-icon paris-icon-arrow-right"data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-right"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function (){
const _slides = $('#myslider .themeparisfr-slider'),
btnPrev = $('#myslider .slider-buttons .prev-slide'),
btnNext = $('#myslider .slider-buttons .next-slide');
_slides.focus()
let totalWidth = 0,
scrollWidth = 0,
nbSlides = 0;
_slides.children('.slide').each(function() {
totalWidth += $(this).width();
nbSlides++;
})
scrollWidth = totalWidth;
if (nbSlides > 1) {
btnPrev.on('click', function() {
_slides.animate({ scrollLeft: '-=305' }, "slow");
if (scrollWidth + 305 >= totalWidth) {
$(this).addClass('disabled').attr('disabled', 'disabled')
} else {
scrollWidth += 305
btnNext.removeClass('disabled').removeAttr('disabled')
}
}).addClass('disabled').attr('disabled', 'disabled');
btnNext.on('click', function() {
_slides.animate({ scrollLeft: '+=305' }, "slow");
if (scrollWidth <= 305) {
$(this).addClass('disabled').attr('disabled', 'disabled')
} else {
scrollWidth -= 305
btnPrev.removeClass('disabled').removeAttr('disabled')
}
}).attr('tabindex', 0);
btnPrev.attr('tabindex', 0).attr('role', 'button').keydown(function(event) {
if (event.which == 32) {
$(this).click();
event.preventDefault();
};
});
btnNext.attr('tabindex', 0).attr('role', 'button').keydown(function(event) {
if (event.which == 32) {
$(this).click();
event.preventDefault();
};
});
} else {
_slides.children('.slider-buttons .btn').remove();
}
});
</script>
<div class="alert alert-outline alert-warning" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-2230218205576471" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-2230218205576471">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Le slider exemple n'est pas opérationnel. Seul l'aspect graphique est présenté ici !</p>
</div>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
id (string)
required- l'ID du carousel
-
sliderLabel (string)
required- Aria label du carousel
-
class (string)
optionnal- permet d'ajouter une classe CSS au slider (par défaut: 'row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4')
-
slides (object)
optionnal- Objet contenant les slides. Liste des attributs : index, id, class, img, imgAlt, link, linkLabel, content
-
slideLabel (string)
optionnal- Label pour le label slide (par défaut: 'slide')
-
buttonNext (string)
optionnal- Label pour le bouton 'next' (par défaut: 'i18n{portal.util.labelNext}')
-
buttonPrev (string)
optionnal- Label pour le bouton 'prev' (par défaut: 'Previous')
-
buttonClass (string)
optionnal- permet d'ajouter une classe CSS aux boutons (par défaut: 'light rounded-circle main-info-color')
-
buttonClass (string)
optionnal- permet d'ajouter une classe CSS aux boutons (par défaut: 'light rounded-circle main-info-color')
-
linkAll (string)
optionnal- permet d'ajouter un lien de redirection vers une autre page
-
linkAllLabel (string)
optionnal- permet de définir le label du lien de redirection
-
linkAllClass (string)
optionnal- permet d'ajouter une classe CSS au lien
-
params (string)
optionnal- permet d'ajouter des parametres HTML au carousel
Aide
Permet de créer un slider. Cette macro utilise la macro cSlide.
Les paramètres de la macro cSlide
-
slide (object)
optionnal- Objet slides. Liste des attributs : index, id, class, img, imgAlt, link, linkLabel, content
-
currentIndex (number)
optionnal- Index du slide en cours (par défaut: 1 )
-
lastIndex (number)
optionnal- Index du dernier slide (par défaut: 1 )
-
params (string)
optionnal- permet d'ajouter des parametres HTML la slide du carousel
Exemple
Forthcoming
To be completed
In progress
Over
Bygone
Fini
<@cStatus />
<@cStatus level='tobecompleted' />
<@cStatus level='inprogress' />
<@cStatus level='over' />
<@cStatus level='bygone' />
<@cStatus label='Fini' level='bygone' />
<div class="status forthcoming">
<span class="status-label fw-bold">Forthcoming</span>
</div>
<div class="status tobecompleted">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="5" fill="currentColor"/></svg>
<span class="status-label fw-bold">To be completed</span>
</div>
<div class="status inprogress">
<span class="status-label fw-bold">In progress</span>
</div>
<div class="status over">
<span class="status-label fw-bold">Over</span>
</div>
<div class="status bygone">
<span class="status-label fw-bold">Bygone</span>
</div>
<div class="status bygone">
<span class="status-label fw-bold">Fini</span>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
level (string)
optionnal- permet de définir le niveau de status du tag (par défaut: 'forthcoming'). Liste des Statuts : forthcoming = A venir / tobecompleted =A compl\u00e9ter / inprogress = En cours / over = Termin\u00e9 / bygone = Pass\u00e9
-
class (string)
optionnal- permet d'ajouter une classe CSS au tag
-
id (string)
optionnal- l'ID du tag
-
label (string)
optionnal- permet de définir le libellé du tag
-
labelClass (string)
optionnal- permet d'ajouter une classe CSS au libellé du tag
-
params (string)
optionnal- permet d'ajouter des parametres HTML au tag
Exemple
| Ligne | Couleur | Stations principales | Détails |
|---|---|---|---|
| 1 | Jaune | La Défense, Châtelet, Gare de Lyon | Plan |
| 2 | Bleu | Porte Dauphine, Place de Clichy, Nation | Plan |
| 3 | Vert | Pont de Levallois, Opéra, Gallieni | Plan |
| 4 | Violet | Porte de Clignancourt, Châtelet, Montrouge | Plan |
Exemple sans "id"
Consulter les log dans la console développeur (
<@cTable id='table1' collapsible=false caption='Tableau avec thème' >
<@cThead>
<@cTr>
<@cTh id='label-1'>Ligne<@sortSite jsp_url='urlname' attribute='attrname' /></@cTh>
<@cTh id='label-2'>Couleur<@sortSite jsp_url='urlname' attribute='attrname' /></@cTh>
<@cTh id='label-3'>Stations principales<@sortSite jsp_url='urlname' attribute='attrname' /></@cTh>
<@cTh id='label-4' class='text-right'>Détails</@cTh>
</@cTr>
</@cThead>
<@cTbody>
<@cTr>
<@cTd>1</@cTd>
<@cTd>Jaune</@cTd>
<@cTd>La Défense, Châtelet, Gare de Lyon</@cTd>
<@cTd class='text-right'><@cLink href='https://www.ratp.fr/plans-lignes/metro/1' label='Plan' target='_blank' class='btn btn-primary' title='Plan ligne 1' /></@cTd>
</@cTr>
<@cTr>
<@cTd>2</@cTd>
<@cTd>Bleu</@cTd>
<@cTd>Porte Dauphine, Place de Clichy, Nation</@cTd>
<@cTd class='text-right'><@cLink href='https://www.ratp.fr/plans-lignes/metro/2' label='Plan' target='_blank' class='btn btn-primary' title='Plan ligne 2' /></@cTd>
</@cTr>
<@cTr>
<@cTd>3</@cTd>
<@cTd>Vert</@cTd>
<@cTd>Pont de Levallois, Opéra, Gallieni</@cTd>
<@cTd class='text-right'><@cLink href='https://www.ratp.fr/plans-lignes/metro/3' label='Plan' target='_blank' class='btn btn-primary' title='Plan ligne 3' /></@cTd>
</@cTr>
<@cTr>
<@cTd>4</@cTd>
<@cTd>Violet</@cTd>
<@cTd>Porte de Clignancourt, Châtelet, Montrouge</@cTd>
<@cTd class='text-right'><@cLink href='https://www.ratp.fr/plans-lignes/metro/4' label='Plan' target='_blank' class='btn btn-primary' title='Plan ligne 4' /></@cTd>
</@cTr>
</@cTbody>
</@cTable>
<div class="d-none d-md-block table-responsive">
<table class="table ctable" id="table1" >
<caption class="visually-hidden">Tableau avec thème</caption>
<thead >
<tr >
<th scope="col" class="" id="label-1" >
Ligne<a href="jsp/site/Portal.jsp?page_id=6#section-ctable&sorted_attribute_name=line&asc_sort=false#sort_line" title="Descending sort" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color"data-mce-svg="paris-icon paris-icon-arrow-down" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-down"></use>
</svg></a>
</th>
<th scope="col" class="" id="label-2" >
Couleur</th>
<th scope="col" class="" id="label-3" >
Stations principales</th>
<th scope="col" class="text-right" id="label-4" >
Détails</th>
</tr>
</thead>
<tbody >
<tr >
<td>
<span>1</span>
</td>
<td>
<span>Jaune</span>
</td>
<td>
<span>La Défense, Châtelet, Gare de Lyon</span>
</td>
<td class="text-right">
<span>
<a href="https://www.ratp.fr/plans-lignes/metro/1" class="btn btn-primary" title="Plan ligne 1 [New window]" target="_blank" >
<span class="link-label">Plan</span>
</a>
</span>
</td>
</tr>
<tr >
<td>
<span>2</span>
</td>
<td>
<span>Bleu</span>
</td>
<td>
<span>Porte Dauphine, Place de Clichy, Nation</span>
</td>
<td class="text-right">
<span>
<a href="https://www.ratp.fr/plans-lignes/metro/2" class="btn btn-primary" title="Plan ligne 2 [New window]" target="_blank" >
<span class="link-label">Plan</span>
</a>
</span>
</td>
</tr>
<tr >
<td>
<span>3</span>
</td>
<td>
<span>Vert</span>
</td>
<td>
<span>Pont de Levallois, Opéra, Gallieni</span>
</td>
<td class="text-right">
<span>
<a href="https://www.ratp.fr/plans-lignes/metro/3" class="btn btn-primary" title="Plan ligne 3 [New window]" target="_blank" >
<span class="link-label">Plan</span>
</a>
</span>
</td>
</tr>
<tr >
<td>
<span>4</span>
</td>
<td>
<span>Violet</span>
</td>
<td>
<span>Porte de Clignancourt, Châtelet, Montrouge</span>
</td>
<td class="text-right">
<span>
<a href="https://www.ratp.fr/plans-lignes/metro/4" class="btn btn-primary" title="Plan ligne 4 [New window]" target="_blank" >
<span class="link-label">Plan</span>
</a>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-md-none" id="accordion-table-table1"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const rows = document.querySelectorAll('table#table1 tbody tr');
rows.forEach(function(row, index) {
const cells = row.querySelectorAll('td');
let accordionContent = '';
cells.forEach(function(cell, i) {
const headerSelector = document.querySelector('table#table1 thead th:nth-child(' + (i + 1) + ')')
const headerText = headerSelector ? headerSelector.innerHTML : '';
const cellText = cell.textContent;
accordionContent += `<p>${headerText}</p><p class='mb-4'><strong>${cellText}</strong></p>`;
});
const accordionItem = `
<div class="accordion " id="accheadingtable1` + index + `" >
<div class="card " >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccheadingtable1` + index + `" aria-expanded="true" aria-controls="collapseAccheadingtable1` + index + `">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccheadingtable1` + index + `" aria-expanded="true" aria-controls="collapseAccheadingtable1` + index + `" aria-labelledby="headingAccheadingtable1` + index + `">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccheadingtable1` + index + `">` + cells[0].textContent + `</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion btn-outline-action">
<svg class="paris-icon paris-icon-arrow-bottom btn-outline-action"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccheadingtable1` + index + `" class="m-0 collapse show" role="region" aria-labelledby="headingAccheadingtable1` + index + `" data-parent="#accheadingtable1` + index + `">
<div class="card-body">
` + accordionContent + `
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccheadingtable1` + index + `" aria-expanded="true" aria-controls="collapseAccheadingtable1` + index + `">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
`;
document.getElementById('accordion-table-table1').insertAdjacentHTML('beforeend', accordionItem);
});
});
</script>
<div class="d-flex justify-content-end">
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectResponsiveTable" name="selectResponsiveTable" class="form-check-input" value="1">
<label class="form-label form-check-label" for="selectResponsiveTable">
Mode responsive alternatif
<p class="selection-subtitle my-sm">Modifier le mode responsive.<br> Ajoute le paramètre "collapsed=true" à la macro cTable.<br>D'autres options sont disponibles pour masquer le header et/ou le footer<br> et modifier l'aspect graphique de la carte</p>
</label>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const checkboxTable = document.getElementById('selectResponsiveTable');
const tableSample = document.getElementById('accordion-table-table1');
const accordionCardList = tableSample.querySelectorAll('.card')
if (checkboxTable && tableSample && accordionCardList) {
checkboxTable.addEventListener('change', function() {
if (this.checked) {
tableSample.classList.add('tabs-list');
accordionCardList.forEach(card => {
const cardHeader = card.querySelector('.card-header');
const collapse = card.querySelector('.collapse');
if (cardHeader) {
cardHeader.classList.add('collapsed');
}
if (collapse) {
collapse.classList.add('show');
}
});
} else {
tableSample.classList.remove('tabs-list');
accordionCardList.forEach(card => {
const cardHeader = card.querySelector('.card-header');
const collapse = card.querySelector('.collapse');
if (cardHeader) {
cardHeader.classList.remove('collapsed');
}
if (collapse) {
collapse.classList.remove('show');
}
});
}
});
}
});
</script>
<h3>
Exemple sans "id"</h3>
<div class="alert alert-outline alert-primary" role="status" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-info"data-mce-svg="paris-icon paris-icon-alert-info" aria-labelledby="paris-icon-alert-info-paris-title-2348522415718181" focusable="false" role="img">
<title id="paris-icon-alert-info-paris-title-2348522415718181">Information</title>
<use href="#paris-icon-alert-info"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Consulter les log dans la console développeur ( <kdb>Ctrl</kdb> + <kdb>Shift</kdb> + <kdb>I</kdb> ) du navigateur et chercher "Paris.fr".</p>
</div>
</div>
</div>
<!-- ATTENTION : Risque de duplication d'id ! -->
<div class="d-none d-md-block table-responsive">
<table class="table ctable" id="changeme" >
<caption class="visually-hidden">Tableau sans id</caption>
<thead >
<tr >
<th scope="col" class="" id="label-1" >
Code <a href="jsp/site/Portal.jsp?page_id=6#section-ctable&sorted_attribute_name=code&asc_sort=false#sort_code" title="Descending sort" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color"data-mce-svg="paris-icon paris-icon-arrow-down" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-down"></use>
</svg></a>
</th>
<th scope="col" class="" id="label-2" >
Valeur <a href="jsp/site/Portal.jsp?page_id=6#section-ctable&sorted_attribute_name=value&asc_sort=false#sort_value" title="Descending sort" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color"data-mce-svg="paris-icon paris-icon-arrow-down" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-down"></use>
</svg></a>
</th>
</tr>
</thead>
<tbody >
<tr >
<td>
<span>A</span>
</td>
<td>
<span>Arc</span>
</td>
</tr>
<tr >
<td>
<span>B</span>
</td>
<td>
<span>Ballon</span>
</td>
</tr>
<tr >
<td>
<span>C</span>
</td>
<td>
<span>Canoë</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-md-none" id="accordion-table-changeme"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.warn( "[Thème Paris fr] macro cTable : ATTENTION : Risque de duplication. Modifier l'id de la macro cTable !" )
const rows = document.querySelectorAll('table#changeme tbody tr');
rows.forEach(function(row, index) {
const cells = row.querySelectorAll('td');
let accordionContent = '';
cells.forEach(function(cell, i) {
const headerSelector = document.querySelector('table#changeme thead th:nth-child(' + (i + 1) + ')')
const headerText = headerSelector ? headerSelector.innerHTML : '';
const cellText = cell.textContent;
accordionContent += `<p>${headerText}</p><p class='mb-4'><strong>${cellText}</strong></p>`;
});
const accordionItem = `
<div class="accordion " id="accheadingchangeme` + index + `" >
<div class="card " >
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccheadingchangeme` + index + `" aria-expanded="false" aria-controls="collapseAccheadingchangeme` + index + `">
<button class="btn btn-link btn-block btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccheadingchangeme` + index + `" aria-expanded="false" aria-controls="collapseAccheadingchangeme` + index + `" aria-labelledby="headingAccheadingchangeme` + index + `">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccheadingchangeme` + index + `">` + cells[0].textContent + `</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion btn-outline-action">
<svg class="paris-icon paris-icon-arrow-bottom btn-outline-action"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccheadingchangeme` + index + `" class="m-0 collapse " role="region" aria-labelledby="headingAccheadingchangeme` + index + `" data-parent="#accheadingchangeme` + index + `">
<div class="card-body">
` + accordionContent + `
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccheadingchangeme` + index + `" aria-expanded="false" aria-controls="collapseAccheadingchangeme` + index + `">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
`;
document.getElementById('accordion-table-changeme').insertAdjacentHTML('beforeend', accordionItem);
});
});
</script>
<script>
// Add toast notification functionality for table header links
document.querySelectorAll('.ctable th a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Create toast container if it doesn't exist
let toastContainer = document.getElementById('toast-container');
if (!toastContainer) {
toastContainer = document.createElement('div');
toastContainer.id = 'toast-container';
toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
toastContainer.style.zIndex = '1055';
document.body.appendChild(toastContainer);
}
// Create toast element
const toastId = 'toast-' + Date.now();
const sortAttribute = this.closest('a').href.split('attribute=')[1] || 'column';
const toastHTML = `
<div id="${toastId}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<div class="rounded me-2 bg-warning" style="width: 20px; height: 20px;"></div>
<strong class="me-auto">Attention</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">
Le tri est désactivé
</div>
</div>
`;
toastContainer.insertAdjacentHTML('beforeend', toastHTML);
// Initialize and show the toast
const toastElement = document.getElementById(toastId);
const toast = new bootstrap.Toast(toastElement, {
delay: 3000
});
toast.show();
// Remove toast element after it's hidden
toastElement.addEventListener('hidden.bs.toast', function() {
this.remove();
});
});
});
console.log('Paris.fr - Table sort toast notifications initialized');
</script>Paramètres
Les paramètres cTable
-
id (string)
optionnal- Défaut "changeme", l'ID du table, ATTENTION changer l'identifiant par défaut si vous utilisez le macro cTableResponsive
-
class (string)
optionnal- permet d'ajouter une classe CSS au tableau
-
caption (string)
optionnal- permet de définir le titre "Caption" du tableau
-
captionClass (string)
optionnal- Défaut "visually-hidden" class du caption du tableau. Accessibilité: permet de masquer le titre du tableau pour les lecteurs d'écran si ele titre précédent le tableau est suffisant.
-
summary (string)
optionnal- permet de définir l'attribut "summary" du tableau
-
breakpoint (string)
optionnal- permet de définir le breakpoint du tableau (valeurs possibles: '-sm','-md','-lg','-xl','-xxl')
-
themed (boolean)
optionnal- permet d'ajouter les style du thème par défaut sinon ce sont les styles de table de BS4 qui seront appliqués (par défaut: true)
-
collapsible (boolean)
optionnal- par défaut pour les petits écran, seule la prmière cellule de la ligne est affichée -en colonne- et les autres sont masquée. Si false tout est en colonne sauf si le paramètre themed est false les styles BS4 seront alors appliqués par défauts (par défaut: true)
-
collapsed (boolean)
optionnal- par défaut masque le contenu de l'accordion (par défaut: false ). Si true le contenu sera affiché.
-
collapsedHeader (boolean)
optionnal- En responsive affiche ou masque le header de l'accordion (par défaut: true ). Si false le header sera masqué.
-
collapsedFooter (boolean)
optionnal- En responsive affiche ou masque le footer de l'accordion (par défaut: true ). Si false le footer sera masqué.
-
collapsedClass (string)
optionnal- classe pour l'accordion en mode responsive (par défaut: '' ).
-
params (string)
optionnal- permet d'ajouter des parametres HTML au tableau
Les paramètres cThead
-
id (string)
optionnal- l'ID du header du tableau
-
class (string)
optionnal- permet d'ajouter une classe CSS au header du tableau
-
params (string)
optionnal- permet d'ajouter des parametres HTML au header du tableau
Les paramètres cTfoot
-
id (string)
optionnal- l'ID du footer du tableau
-
class (string)
optionnal- permet d'ajouter une classe CSS au footer du tableau
-
params (string)
optionnal- permet d'ajouter des parametres HTML au footer du tableau
Les paramètres cTbody
-
id (string)
optionnal- l'ID du body du tableau
-
class (string)
optionnal- permet d'ajouter une classe CSS au body du tableau
-
params (string)
optionnal- permet d'ajouter des parametres HTML au body du tableau
Les paramètres cTr
-
id (string)
optionnal- l'ID de la ligne du tableau
-
class (string)
optionnal- permet d'ajouter une classe CSS à la ligne du tableau
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la ligne du tableau
Les paramètres cTh
-
id (string)
optionnal- l'ID du Th du tableau
-
class (string)
optionnal- permet d'ajouter une classe CSS au Th du tableau
-
scope (string)
optionnal- permet de définir le scope de la cellule (par défaut: 'col', valeurs possibles: 'col', 'row')
-
role (string)
optionnal- permet de définir le role du Th du tableau (par défaut: 'columnheader', valeurs possibles: 'columnheader', 'rowheader')
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la ligne du tableau
Les paramètres cTd
-
id (string)
optionnal- l'ID de la cellule du tableau
-
class (string)
optionnal- permet d'ajouter une classe CSS à la cellule du tableau
-
scope (string)
optionnal- permet de définir le scope de la cellule (valeurs possibles: 'col', 'row')
-
role (string)
optionnal- permet de définir le role de la cellule du tableau
-
headers (string)
optionnal- permet de spécifier la liste des identifiants des cellules d'en-tête, th, qui fournissent des informations d'en-tête pour la cellule de données actuelles
-
colspan (string)
optionnal- permet de définir l'attribut 'colspan'
-
nospan (boolean)
optionnal- permet d'ajouter un tag 'span' dans le 'td' (par défaut: false)
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la cellule du tableau
@cTooltip
Exemple
Tooltip sur lien
Voici un lien avec un tooltip : Le tooltip est visible en hover .
Tooltip sur bouton
Tooltip Secondary sur bouton
Tooltip sur bouton désactivé
Tooltip sur Icon
<@cTitle level=4>Tooltip sur lien</@cTitle>
<@cText class="m-0">
Voici un lien avec un tooltip : <@cLink label="Le tooltip est visible en hover" href="#" params="data-bs-toggle='tooltip' data-bs-custom-class='custom-tooltip' data-bs-title='Mon Tooltip'"/>.
</@cText>
<@cTitle level=4>Tooltip sur bouton</@cTitle>
<@cBtn label='Tootlip top custom' class='secondary m-xxs' params="data-bs-toggle='tooltip' data-bs-placement='top' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'" />
<@cBtn label='Tootlip right custom' class='secondary m-xxs' params="data-bs-toggle='tooltip' data-bs-placement='right' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'" />
<@cBtn label='Tootlip bottom custom' class='secondary m-xxs' params="data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'" />
<@cBtn label='Tootlip left custom' class='secondary m-xxs' params="data-bs-toggle='tooltip' data-bs-placement='left' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'" />
<@cTitle level=4>Tooltip Secondary sur bouton</@cTitle>
<@cBtn label='Tootlip top custom' class='primary m-xxs' params="data-bs-toggle='tooltip' data-bs-placement='top' data-bs-custom-class='custom-tooltip secondary' data-bs-title='Mon tooltip'" />
<@cBtn label='Tootlip right custom' class='primary m-xxs' params="data-bs-toggle='tooltip' data-bs-placement='right' data-bs-custom-class='custom-tooltip secondary' data-bs-title='Mon tooltip'" />
<@cBtn label='Tootlip bottom custom' class='primary m-xxs' params="data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-custom-class='custom-tooltip secondary' data-bs-title='Mon tooltip'" />
<@cBtn label='Tootlip left custom' class='primary m-xxs' params="data-bs-toggle='tooltip' data-bs-placement='left' data-bs-custom-class='custom-tooltip secondary' data-bs-title='Mon tooltip'" />
<@cTitle level=4>Tooltip sur bouton désactivé</@cTitle>
<@cInline class="d-inline-block m-0" params='tabindex="0" data-bs-toggle="tooltip" data-bs-custom-class='custom-tooltip' data-bs-title="Mon tooltip"'>
<@cBtn label='Tooltip top custom' class='primary m-xxs' disabled=true />
</@cInline >
<@cTitle level=4>Tooltip sur Icon</@cTitle>
<@parisIcon name='nef' params="data-bs-toggle='tooltip' data-bs-placement='top' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'" />
<@parisIcon name='nef' params="data-bs-toggle='tooltip' data-bs-placement='right' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'" />
<@parisIcon name='nef' params="data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'" />
<@parisIcon name='nef' params="data-bs-toggle='tooltip' data-bs-placement='left' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'" />
<h4>
Tooltip sur lien</h4>
<p class="m-0">
Voici un lien avec un tooltip :
<a href="#" data-bs-toggle='tooltip' data-bs-custom-class='custom-tooltip' data-bs-title='Mon Tooltip' >
<span class="link-label">Le tooltip est visible en hover</span>
</a>
.
</p>
<h4>
Tooltip sur bouton</h4>
<button class="btn btn-secondary m-xxs" type="submit"data-bs-toggle='tooltip' data-bs-placement='top' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'>
<span class="btn-label ">Tootlip top custom</span>
</button>
<button class="btn btn-secondary m-xxs" type="submit"data-bs-toggle='tooltip' data-bs-placement='right' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'>
<span class="btn-label ">Tootlip right custom</span>
</button>
<button class="btn btn-secondary m-xxs" type="submit"data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'>
<span class="btn-label ">Tootlip bottom custom</span>
</button>
<button class="btn btn-secondary m-xxs" type="submit"data-bs-toggle='tooltip' data-bs-placement='left' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'>
<span class="btn-label ">Tootlip left custom</span>
</button>
<h4>
Tooltip Secondary sur bouton</h4>
<button class="btn btn-primary m-xxs" type="submit"data-bs-toggle='tooltip' data-bs-placement='top' data-bs-custom-class='custom-tooltip secondary' data-bs-title='Mon tooltip'>
<span class="btn-label ">Tootlip top custom</span>
</button>
<button class="btn btn-primary m-xxs" type="submit"data-bs-toggle='tooltip' data-bs-placement='right' data-bs-custom-class='custom-tooltip secondary' data-bs-title='Mon tooltip'>
<span class="btn-label ">Tootlip right custom</span>
</button>
<button class="btn btn-primary m-xxs" type="submit"data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-custom-class='custom-tooltip secondary' data-bs-title='Mon tooltip'>
<span class="btn-label ">Tootlip bottom custom</span>
</button>
<button class="btn btn-primary m-xxs" type="submit"data-bs-toggle='tooltip' data-bs-placement='left' data-bs-custom-class='custom-tooltip secondary' data-bs-title='Mon tooltip'>
<span class="btn-label ">Tootlip left custom</span>
</button>
<h4>
Tooltip sur bouton désactivé</h4>
<span class="d-inline-block m-0" tabindex="0" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-title="Mon tooltip">
<button class="btn btn-primary m-xxs" type="submit" disabled>
<span class="btn-label ">Tooltip top custom</span>
</button>
</span>
<h4>
Tooltip sur Icon</h4>
<svg class="paris-icon paris-icon-nef"data-mce-svg="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img" tabindex="0" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-title="Mon tooltip">
<use href="#paris-icon-nef"></use>
</svg>
<svg class="paris-icon paris-icon-nef"data-mce-svg="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img" tabindex="0" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-title="Mon tooltip">
<use href="#paris-icon-nef"></use>
</svg>
<svg class="paris-icon paris-icon-nef"data-mce-svg="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img" tabindex="0" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-title="Mon tooltip">
<use href="#paris-icon-nef"></use>
</svg>
<svg class="paris-icon paris-icon-nef"data-mce-svg="paris-icon paris-icon-nef" aria-hidden="true" focusable="false" role="img" tabindex="0" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-title="Mon tooltip">
<use href="#paris-icon-nef"></use>
</svg>Paramètres
Les paramètres de tooltip
-
data-bs-toggle (string)
required- permet d'activer le tooltip
-
data-bs-placement (string)
optionnal- définit la position du tooltip
-
data-bs-custom-class (string)
optionnal- définit la class du tooltip
-
data-bs-title (string)
required- définit le texte du tooltip
Aide
Ce composant n'est pas une macro car il se base sur le tooltip de Bootstrap qui est utilisable uniquement via des attributs HTML à ajouter sur d'autres composants/macros déjà existants (liens, boutons, icons...)
D'autres paramètres sont disponibles sur la documentation de Bootstrap en plus de ceux disponibles ci-dessus: Documentation Tooltip Bootstrap
@cPopover
Exemple
Popover sur lien
Voici un lien avec un Popover : Le Popover est visible en hover .
Voici un lien avec un Popover et contenu uniquement : Le Popover est visible en hover .
Voici un lien avec un Popover et titre uniquement: Le Popover est visible en hover .
Popover sur bouton
Popover sur bouton désactivé
<@cBlock>
<@cTitle level=4>Popover sur lien</@cTitle>
<@cText class="m-0">
Voici un lien avec un Popover : <@cLink label='Le Popover est visible en hover' href='#' params='data-bs-toggle="popover" data-bs-custom-class="custom-popover" data-bs-trigger="hover" data-bs-placement="bottom" data-bs-title="Titre du Popover" data-bs-content="Le contenu de mon popover."' />.
</@cText>
</@cBlock>
<@cBlock>
<@cTitle level=4>Popover sur bouton</@cTitle>
<@cBtn label='btn-primary avec popover sur click' class='primary m-xxs' params='data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover"' />
</@cBlock>
<@cBlock>
<@cTitle level=4>Popover sur bouton désactivé</@cTitle>
<@cInline class='d-inline-block m-0' params='tabindex="0" data-bs-toggle="popover" data-bs-custom-class="custom-popover secondary" data-bs-title="Mon bouton desactivé" data-bs-content="Le contenu de mon popover."'>
<@cBtn label='Tooltip top custom' class='primary m-xxs' disabled=true />
</@cInline >
</@cBlock>
<div>
<h4>
Popover sur lien</h4>
<p class="m-0">
Voici un lien avec un Popover :
<a href="#" data-bs-toggle="popover" data-bs-custom-class="custom-popover" data-bs-trigger="hover" data-bs-placement="bottom" data-bs-title="Titre du Popover" data-bs-content="Le contenu de mon popover." >
<span class="link-label">Le Popover est visible en hover</span>
</a>
.
</p>
<p class="m-0">
Voici un lien avec un Popover et contenu uniquement :
<a href="#" data-bs-toggle="popover" data-bs-custom-class="custom-popover" data-bs-trigger="hover" data-bs-placement="bottom" data-bs-content="Le contenu de mon popover." >
<span class="link-label">Le Popover est visible en hover</span>
</a>
.
</p>
<p class="m-0">
Voici un lien avec un Popover et titre uniquement:
<a href="#" data-bs-toggle="popover" data-bs-custom-class="custom-popover" data-bs-trigger="hover" data-bs-placement="bottom" data-bs-title="Titre du Popover" >
<span class="link-label">Le Popover est visible en hover</span>
</a>
.
</p>
</div>
<div>
<h4>
Popover sur bouton</h4>
<button class="btn btn-primary m-xxs" type="submit"data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
<span class="btn-label ">btn-primary avec popover sur click</span>
</button>
</div>
<div>
<h4>
Popover sur bouton désactivé</h4>
<span class="d-inline-block m-0" tabindex="0" data-bs-toggle="popover" data-bs-custom-class="custom-popover secondary" data-bs-title="Mon bouton desactivé" data-bs-content="Le contenu de mon popover.">
<button class="btn btn-primary m-xxs" type="submit" disabled>
<span class="btn-label ">Tooltip top custom</span>
</button>
</span>
</div>Paramètres
Les paramètres de popover
-
data-bs-toggle (string)
required- permet d'activer le popover
-
data-bs-placement (string)
optionnal- définit la position du popover
-
data-bs-custom-class (string)
optionnal- définit une classe CSS pour le popover
-
data-bs-title (string)
required- définit le titre du popover
-
data-bs-content (string)
required- définit le texte du contenu du popover
-
data-bs-trigger (string)
required- définit le mode de déclenchement du popover. Par défaut "click", peut aussi être "hover"
-
data-bs-html (string)
required- définit si le contenu du popover contient du HTML
Aide
Ce composant n'est pas une macro car il se base sur le "popover"" de Bootstrap qui est utilisable uniquement via des attributs HTML à ajouter sur d'autres composants/macros déjà existants (liens, boutons, icons...)
D'autres paramètres sont disponibles sur la documentation de Bootstrap en plus de ceux disponibles ci-dessus: Documentation Popover de Bootstrap
Exemple
Toast succès
Toast warning
Toast erreur
Toast info
Notification Toast avec titre
Contenu du toast
Contenu du toast
Contenu du toast
Toast succès
Toast warning
Toast erreur
Toast info
<@cBtn id='showToastButton' label='Notification toast par bouton déclencheur' />
<@cInitToast id="toastContainer1" position="position-fixed" showAll=false triggerId="showToastButton">
<@cToast id="toast1" content="Toast succès" type="success"></@cToast>
<@cToast id="toast2" content="Toast warning" type="warning"></@cToast>
<@cToast id="toast3" content="Toast erreur" type="error"></@cToast>
<@cToast id="toast4" content="Toast info" type="info"></@cToast>
</@cInitToast>
<@cInitToast id="toastContainer2" position="position-static" duration=0 showAll=true class='ml-l'>
<@cToast id="toast5" title="Notification Toast avec titre" content="Contenu du toast" delay=0></@cToast>
<@cToast id="toast6" content="Contenu du toast" delay=0></@cToast>
<@cToast id="toast7" content="Contenu du toast" dismiss=false delay=0>
<@cBlock class="mt-m pt-xs border-top">
<@cBtn label='Action' class='primary m-xxs' size="mini" />
<@cBtn label='Fermer' class='secondary m-xxs' size="mini" params='data-bs-dismiss="toast"' />
</@cBlock>
</@cToast>
<@cToast id="toast8" content="Toast succès" type="success" delay=0></@cToast>
<@cToast id="toast9" content="Toast warning" type="warning" delay=0></@cToast>
<@cToast id="toast10" content="Toast erreur" type="error" delay=0></@cToast>
<@cToast id="toast11" content="Toast info" type="info" delay=0></@cToast>
</@cInitToast>
<button class="btn btn-primary" type="submit" id="showToastButton">
<span class="btn-label ">Notification toast par bouton déclencheur</span>
</button>
<div id="toastContainer1" class="toast-container position-fixed p-3" style="position-fixed">
<div id="toast1" class="toast success" role="alert" data-autohide="true" data-delay="2000" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Toast succès
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast2" class="toast warning" role="alert" data-autohide="true" data-delay="2000" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Toast warning
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast3" class="toast error" role="alert" data-autohide="true" data-delay="2000" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Toast erreur
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast4" class="toast info" role="alert" data-autohide="true" data-delay="2000" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Toast info
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Récupérer le conteneur spécifique par son identifiant
var container = document.getElementById('toastContainer1');
var toastElList = [].slice.call(container.querySelectorAll('.toast'));
var option = { delay: 2000, animation: true, autohide: true };
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl, option);
});
// Ajouter un écouteur d'événement sur le bouton spécifié si triggerId est fourni
var toastTrigger = document.getElementById('showToastButton');
if (toastTrigger) {
toastTrigger.addEventListener('click', function() {
toastList.forEach(function(toast) {
toast.show();
});
});
}
});
</script>
<div id="toastContainer2" class="toast-container position-static p-3 ml-l" style="position-static">
<div id="toast5" class="toast" role="alert" data-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Notification Toast avec titre</strong>
<button type="button" class="ms-auto btn-close" data-bs-dismiss="toast" aria-label="Close">×</button>
</div>
<div class="toast-body">
Contenu du toast
</div>
</div>
<div id="toast6" class="toast" role="alert" data-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Contenu du toast
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast7" class="toast" role="alert" data-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto w-100">
Contenu du toast
<div class="mt-m pt-xs border-top">
<button class="btn btn-primary m-xxs btn-mini" type="submit">
<span class="btn-label ">Action</span>
</button>
<button class="btn btn-secondary m-xxs btn-mini" type="submit"data-bs-dismiss="toast">
<span class="btn-label ">Fermer</span>
</button>
</div>
</div>
</div>
</div>
<div id="toast8" class="toast success" role="alert" data-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Toast succès
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast9" class="toast warning" role="alert" data-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Toast warning
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast10" class="toast error" role="alert" data-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Toast erreur
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast11" class="toast info" role="alert" data-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<div class="toast-body me-auto">
Toast info
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Récupérer le conteneur spécifique par son identifiant
var container = document.getElementById('toastContainer2');
var toastElList = [].slice.call(container.querySelectorAll('.toast'));
var option = { delay: 0, animation: true, autohide: false };
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl, option);
});
// Afficher les toasts au chargement si showAll est vrai
toastList.forEach(function(toast) {
toast.show();
});
});
</script>Paramètres
Les paramètres cToast
-
delay (number)
required- Durée de l'apparition de la notification toast.
-
dismiss (boolean)
required- Affichage de l'icône de fermeture, à true par défaut.
-
title (string)
optionnal- Titre de la notification toast.
-
content (string)
optionnal- Contenu de la notification toast.
-
imgUrl (string)
optionnal- URL de l'image à afficher dans le head de la notification toast.
-
type (string)
optionnal- Type de notification toast. Peut être "info", "success", "warning" ou "error".
-
id (string)
optionnal- L'ID de la notification toast.
-
class (string)
optionnal- Permet d'ajouter une classe CSS au tableau.
-
deprecated (string)
optionnal- Paramètres deprecated.
Les paramètres cInitToast
-
class (string)
optionnal- Permet d'ajouter des classes CSS supplémentaires au conteneur de toasts.
-
id (string)
optionnal- Identifiant unique du conteneur de toasts.
-
position (string)
optionnal(par défaut : 'position-fixed') : Position CSS du conteneur de toasts. Valeurs possibles : 'position-fixed', 'position-static', etc.
-
showAll (boolean)
optionnal(par défaut : true) : Indique si tous les toasts doivent être affichés au chargement de la page.
-
animation (boolean)
optionnal(par défaut : true) : Active les animations des toasts si true.
-
duration (number)
optionnal(par défaut : 2000) : Durée d'affichage des toasts en millisecondes.
-
triggerId (string)
optionnal- Identifiant de l'élément déclencheur pour afficher les toasts.
-
params (string)
optionnal- Paramètres supplémentaires à ajouter au conteneur de toasts.
-
deprecated (string)
optionnal- Paramètres deprecated.
Exemple
<@cSkeleton />
<hr>
<@cSkeleton bones=["text","short-text","text","image","button"] class='my-xl' />
<div class="skeleton">
<div class="sk-bone sk-text"></div>
</div>
<hr>
<div class="skeleton my-xl">
<div class="sk-bone sk-text"></div>
<div class="sk-bone sk-text"></div>
<div class="sk-bone sk-image-wrapper">
<div class="sk-bone sk-image"></div>
</div>
<div class="sk-bone sk-button"></div>
</div>Paramètres
Les paramètres de la macro cSkeleton
-
bones (array)
optionnal- permet permet de définir la liste des items du skeleton, si non défini affiche un squelette par défaut. Voir l'aide ci-dessous pour les valeurs possibles
-
id (string)
optionnal- l'ID du skeleton
-
class (string)
optionnal- permet d'ajouter une classe CSS au skeleton
-
params (string)
optionnal- permet d'ajouter des parametres HTML au skeleton
Aide
Ce composant permet d'afficher un "skeleton" ou "placeholder" lors qu chargement d'une page ou d'un redirection par exemple.
Le skeleton par défaut ne comprend que la figuration d'un champs. Pour ajouter plusieurs lignes if faut définir le paramètre "bones" avec les types de valeurs ci-dessous
- text : figure un input
- short : figure un input court
- image : figure une image
- button : figure un bouton