Thème Paris.fr
@cAccordion
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
<@cCard title='' class='gray-light-bg-color p-sm' >
<@cAccordion id='acc1' title='Titre de l\'accordéon' subTitle='...et son sous-titre'>
Contenu de l'accordéon
</@cAccordion>
</@cCard>
<@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="card gray-light-bg-color p-sm">
<div class="card-body">
<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 xlink: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>
</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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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 xlink: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">Voir le détail</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 xlink: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" data-bs-toggle="collapse" data-bs-target="#collapseAccacc34" aria-expanded="true" 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="true" 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 xlink: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">Voir le détail</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 xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc34" class="m-0 collapse show" 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="true" 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 xlink: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">Voir le détail</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 xlink: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 xlink: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
-
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)
@cAlert
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-301929474320651" focusable="false" role="img">
<title id="paris-icon-alert-info-paris-title-301929474320651">Information</title>
<use xlink: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-305336795972221" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-305336795972221">Error</title>
<use xlink: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-308744117623791" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-308744117623791">Error</title>
<use xlink: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-312151439275361" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-312151439275361">Error</title>
<use xlink: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-btn-close" 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-316558760926931" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-316558760926931">Warning</title>
<use xlink: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-320966082578501" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-320966082578501">Warning</title>
<use xlink: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-btn-close" 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-325373404230071" focusable="false" role="img">
<title id="paris-icon-alert-check-paris-title-325373404230071">Success</title>
<use xlink: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-329780725881641" focusable="false" role="img">
<title id="paris-icon-alert-check-paris-title-329780725881641">Success</title>
<use xlink: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-btn-close" 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-sm">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-sm">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-sm">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-sm">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 class="list-unstyled" >
<li class="bg-secondary ps-sm py-sm">
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-xxs" class="text-white" >
<span class="link-label">Item 1</span>
</a>
</li>
<li class="bg-secondary ps-sm py-sm">
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-2" class="text-white" >
<span class="link-label">Item 2</span>
</a>
</li>
<li class="bg-secondary ps-sm py-sm">
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-3" class="text-white" >
<span class="link-label">Item 3</span>
</a>
</li>
<li class="bg-secondary ps-sm py-sm">
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-4" class="text-white" >
<span class="link-label">Item 4</span>
</a>
</li>
<li class="bg-secondary ps-sm py-sm">
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-5" class="text-white" >
<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-sm" 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-sm" 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-sm" 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-sm" 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
@cBadge
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
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)
Exemple
Example 1
Example 2
<@cTitle level=4 class='mt-l'>Example 1</@cTitle>
<#assign buttons1 = [
{"label":"A", "class":"secondary"},
{"label":"B", "class":"secondary"},
{"label":"C", "class":"secondary"}
]>
<@cBlock>
<@cBtnGroup label='Menu Accueil' buttonList=buttons1 />
</@cBlock>
<@cTitle level=4 class='mt-l'>Example 2</@cTitle>
<#assign buttons2 = [
{"label":"Réactif", "class":"primary"},
{"label":"Actif", "class":"primary active"}
]>
<@cBlock>
<@cBtnGroup label='Menu Accueil' type='vertical' buttonList=buttons2 />
</@cBlock>
<h4 class="mt-l">
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="m-0 d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">C</span>
</button>
</li>
</ul>
</div>
</div>
<h4 class="mt-l">
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="m-0 d-flex">
<button class="btn btn-primary w-100" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-primary active w-100" type="submit">
<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
-
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
Example 3
<#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 class='mt-l'>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 class='mt-l'>Example 2</@cTitle>
<@cBtnToolbar type='vertical' label='Menu Accueil' class='d-flex mt-sm align-items-center'>
<@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 class='mt-l'>Example 3</@cTitle>
<@cBtnToolbar label='Menu Accueil' class='d-flex mt-sm 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 class="mt-l">
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="m-0 d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-primary" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-primary active" type="submit" disabled>
<span class="btn-label ">Actif</span>
</button>
</li>
</ul>
</div>
</div>
<h4 class="mt-l">
Example 2</h4>
<div class="btn-toolbar-vertical d-flex mt-sm align-items-center" 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="m-0 d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-primary" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-primary active" type="submit" disabled>
<span class="btn-label ">Actif</span>
</button>
</li>
</ul>
</div>
</div>
<h4 class="mt-l">
Example 3</h4>
<div class="btn-toolbar d-flex mt-sm 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="m-0 d-flex">
<button class="btn btn-secondary w-100" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-secondary w-100" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-secondary w-100" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
</li>
<li class="m-0 d-flex">
<button class="btn btn-secondary w-100" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-primary w-100" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="m-0 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="m-0 d-flex">
<button class="btn btn-primary w-100" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="m-0 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 class='mt-l'>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 class='mt-l'>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 class='mt-l'>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 class="mt-l">
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 class="mt-l">
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 class="mt-l">
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')
-
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
Example 5
- 1
- 2
- 3
Le hasard
Fait bien
Mais pas que...
Les choses
<@cTitle level=4 class='mt-l'>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 class='mt-l'>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 class='mt-l'>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 class='mt-l'>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>
<@cTitle level=4 class='mt-l'>Example 5</@cTitle>
<@cCarousel id='manege5' items='' slideControls=true indicatorSize=3 controls=true pagination=true 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>
<h4 class="mt-l">
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 class="mt-l">
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 xlink: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 xlink: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 class="mt-l">
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 xlink: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 xlink: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 class="mt-l">
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 xlink: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 xlink: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 xlink: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>
<h4 class="mt-l">
Example 5</h4>
<div id="carouselButtons-manege5" class="d-flex justify-content-center py-2">
<button id="playButton-manege5" 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 xlink:href="#paris-icon-play"></use>
</svg>
</button>
<button id="pauseButton-manege5" 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 xlink:href="#paris-icon-refresh"></use>
</svg>
</button>
<button id="stopButton-manege5" 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 xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<div id="manege5" 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="#manege5" 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="#manege5" 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="#manege5" 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/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>
<button class="carousel-control-prev" data-bs-target="#manege5" 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 xlink:href="#paris-icon-arrow-left"></use>
</svg>
<span class="visually-hidden"></span>
</span>
</button>
<button class="carousel-control-next" data-bs-target="#manege5" 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 xlink: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>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
var carouselElement = document.getElementById('manege5');
var carousel = bootstrap.Carousel.getOrCreateInstance(carouselElement);
document.getElementById('playButton-manege5').addEventListener('click', function () {
carousel.cycle();
});
document.getElementById('pauseButton-manege5').addEventListener('click', function () {
carousel.pause();
});
document.getElementById('stopButton-manege5').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
-
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 class='mt-l'>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-center'><@cBtn label='Text example' class='primary mt-sm' /></@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-center'><@cBtn label='Text example' class='primary mt-sm' /></@cText>
</@cCard>
</@chItem>
</@chList>
<@cTitle level=4 class='mt-l'>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-center'><@cBtn label='Text example' class='primary mt-sm' /></@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-center'><@cBtn label='Text example' class='primary mt-sm' /></@cText>
</@cCard>
</@chItem>
</@chList>
<@cTitle level=4 class='mt-l'>Horizontal</@cTitle>
<@chList class='list-unstyled'>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' orientation='h'>
<@cBlock class='d-flex justify-content-between align-items-end align-items-end'>
<@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>
<@cBtn label='Text example' class='action ml-sm text-right' />
</@cBlock >
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' orientation='h'>
<@cBlock class='d-flex justify-content-between align-items-end align-items-end'>
<@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 >
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' orientation='h'>
<@cBlock class='d-flex justify-content-between align-items-end align-items-end'>
<@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>
<@cBtn label='Text example' class='action ml-sm text-right' />
</@cBlock >
</@cCard>
</@chItem>
</@chList>
<@cTitle level=4 class='mt-l'>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-flex justify-content-between align-items-end align-items-end'>
<@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>
<@cBtn label='Text example' class='action ml-sm text-right' />
</@cBlock>
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' orientation='h' class='secondary'>
<@cBlock class='d-flex justify-content-between align-items-end align-items-end'>
<@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 >
</@cCard>
</@chItem>
<@chItem>
<@cCard title='Title example' orientation='h' class='secondary'>
<@cBlock class='d-flex justify-content-between align-items-end align-items-end'>
<@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>
<@cBtn label='Text example' class='action ml-sm text-right' />
</@cBlock >
</@cCard>
</@chItem>
</@chList>
<@cTitle level=4 class='mt-l'>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-sm"><@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-sm"><@cBtn label='Text example' class='expand' /></@cText>
</@cCard>
</@chItem>
</@chList>
<h4 class="mt-l">
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-center">
<button class="btn btn-primary mt-sm" 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-center">
<button class="btn btn-primary mt-sm" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
</ul>
<h4 class="mt-l">
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-center">
<button class="btn btn-primary mt-sm" 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-center">
<button class="btn btn-primary mt-sm" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
</ul>
<h4 class="mt-l">
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-flex justify-content-between align-items-end align-items-end">
<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>
<button class="btn btn-action ml-sm text-right" 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-flex justify-content-between align-items-end align-items-end">
<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>
</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-flex justify-content-between align-items-end align-items-end">
<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>
<button class="btn btn-action ml-sm text-right" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<h4 class="mt-l">
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-flex justify-content-between align-items-end align-items-end">
<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>
<button class="btn btn-action ml-sm text-right" 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-flex justify-content-between align-items-end align-items-end">
<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>
</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-flex justify-content-between align-items-end align-items-end">
<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>
<button class="btn btn-action ml-sm text-right" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<h4 class="mt-l">
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-sm">
<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-sm">
<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
-
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
-
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')
-
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
@cCardFloating
Exemple
<#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"}
]>
<div style="height: 450px; position: relative;">
<@cCardFloating id='float' title='Carte Flotante' class='d-block'>
<@cList items=ls class='list-highlight-secondary'/>
</@cCardFloating>
</div>
<div style="height: 450px; position: relative;">
<@cCardFloating id='float' dismissible=false title='Carte Flotante' class='d-block'>
<@cList items=ls class='list-highlight-secondary'/>
</@cCardFloating>
</div>
<div style="height: 450px; position: relative">
<@cCardFloating id='float2' title='Carte Flotante Secondary' class='d-block secondary'>
<@cList items=ls class='list-highlight-secondary'/>
</@cCardFloating>
</div>
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-body">
<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" />
</button>
</div>
<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 style="height: 450px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-body">
<div class='card-title-container'>
<h3 class="card-title">
Carte Flotante</h3>
</div>
<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 style="height: 450px; position: relative">
<div class="card card-floating d-block secondary" id="float2-card" >
<div class="card-body">
<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" />
</button>
</div>
<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>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.
Example "Masonry""
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.
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.
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-center'><@cBtn label='Text example' class='primary mt-sm' /></@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-center'><@cBtn label='Text example' class='primary mt-sm' /></@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-center'><@cBtn label='Text example' class='primary mt-sm' /></@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-center'><@cBtn label='Text example' class='primary mt-sm' /></@cBlock>
</@cCard>
</@cCol>
</@cCardLayout>
<@cTitle level=4 class='ml-l'>Example "Masonry""</@cTitle>
<@cCardLayout class='mt-0' type='masonry'>
<@cCol cols='sm-6 col-lg-4 mb-m'>
<@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-center'><@cBtn label='Text example' class='primary mt-sm' /></@cBlock>
</@cCard>
</@cCol>
<@cCol cols='sm-6 col-lg-4 mb-m'>
<@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-center'><@cBtn label='Text example' class='primary mt-sm' /></@cBlock>
</@cCard>
</@cCol>
<@cCol cols='sm-6 col-lg-4 mb-m'>
<@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 cols='sm-6 col-lg-4 mb-m'>
<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' />
</@cCol>
<@cCol cols='sm-6 col-lg-4 mb-m'>
<@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 cols='sm-6 col-lg-4 mb-m'>
<@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-center'><@cBtn label='Text example' class='primary mt-sm' /></@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-center">
<button class="btn btn-primary mt-sm" 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-center">
<button class="btn btn-primary mt-sm" 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-center">
<button class="btn btn-primary mt-sm" 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-center">
<button class="btn btn-primary mt-sm" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<h4 class="ml-l">
Example "Masonry""</h4>
<div class="row mt-0" data-masonry='{"percentPosition": true }' >
<div class="col-sm-6 col-lg-4 mb-m ">
<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-center">
<button class="btn btn-primary mt-sm" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-m ">
<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-center">
<button class="btn btn-primary mt-sm" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-m ">
<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-sm-6 col-lg-4 mb-m ">
<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-sm-6 col-lg-4 mb-m ">
<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-sm-6 col-lg-4 mb-m ">
<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-center">
<button class="btn btn-primary mt-sm" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script src="themes/skin/parisfr/js/vendor/masonry/masonry.pkgd.min.js" charset="utf-8"></script>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: '', valeur possible: 'masonry'))
-
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>
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";
// When user allow cookie
},
"fallback": function () {
"use strict";
// when use deny cookie
}
};
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": "cookiecitelibre", /* 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" : false, /* 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');
</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')
-
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')
-
denyAll (boolean)
optionnal- Option permettant d'afficher le bouton "Tout refuser" (par défaut: false)
-
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')
-
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} .
@cStepper
Exemple
Exemple Stepper
-
Step 1 of 5
Text example
-
Step 2 of 5
Text example
-
Step 3 of 5
Text example
-
Step 4 of 5
Text example
-
Step 5 of 5
Text example
Exemple Stepper 1
-
Step 1 of 5
Text example
-
Step 2 of 5
Text example
-
Step 3 of 5
Text example
-
Step 4 of 5
Text example
-
Step 5 of 5
Text example
Exemple Stepper 2
-
Step 1 of 5
Text example
-
Step 2 of 5
Text example
-
Step 3 of 5
Text example
-
Step 4 of 5
Text example
-
Step 5 of 5
Text example
Exemple Stepper 3
-
Step 1 of 5
Text example
-
Step 2 of 5
Text example
-
Step 3 of 5
Text example
-
Step 4 of 5
Text example
-
Step 5 of 5
Text example
Exemple Stepper 4
-
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
<#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-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>
</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>
</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>
</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>
</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>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
</div>
<div class="stepper-wrapper px-1 px-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 xlink: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>
</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>
</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>
</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>
</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>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
</div>
<div class="stepper-wrapper px-1 px-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 xlink: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>
</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>
</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>
</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>
</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>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
</div>
<div class="stepper-wrapper px-1 px-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" 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>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="done">
<figure class="p-3" 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>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="started">
<figure class="p-3" 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>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
<li>
<figure class="p-3" 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>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<figure class="p-3" 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>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
</div>
<div class="stepper-wrapper px-1 px-xl-5 pb-xl">
<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 xlink: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 <div class="infostep-more">
<div class="extra visually-hidden">
content
<button type='button' class='btn btn-infostep-less main-color'>
<span class="button-label">Close</span>
</button>
</div>
</div>
<button type='button' class='btn btn-infostep-more main-color'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-plus"></use>
</svg>
<span class="button-label">Show more</span>
</button>
</p>
</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 xlink: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 <div class="infostep-more">
<div class="extra visually-hidden">
content
<button type='button' class='btn btn-infostep-less main-color'>
<span class="button-label">Close</span>
</button>
</div>
</div>
<button type='button' class='btn btn-infostep-more main-color'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-plus"></use>
</svg>
<span class="button-label">Show more</span>
</button>
</p>
</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 xlink: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 <div class="infostep-more">
<div class="extra visually-hidden">
content
<button type='button' class='btn btn-infostep-less main-color'>
<span class="button-label">Close</span>
</button>
</div>
</div>
<button type='button' class='btn btn-infostep-more main-color'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-plus"></use>
</svg>
<span class="button-label">Show more</span>
</button>
</p>
</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 xlink: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 <div class="infostep-more">
<div class="extra visually-hidden">
content
<button type='button' class='btn btn-infostep-less main-color'>
<span class="button-label">Close</span>
</button>
</div>
</div>
<button type='button' class='btn btn-infostep-more main-color'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-plus"></use>
</svg>
<span class="button-label">Show more</span>
</button>
</p>
</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 <div class="infostep-more">
<div class="extra visually-hidden">
content
<button type='button' class='btn btn-infostep-less main-color'>
<span class="button-label">Close</span>
</button>
</div>
</div>
<button type='button' class='btn btn-infostep-more main-color'>
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-plus"></use>
</svg>
<span class="button-label">Show more</span>
</button>
</p>
</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)
-
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.
N.B.: La largeur du titre peut se régler en utilisant la variable css "--title-w". Voir exemple "Stepper 2"
@cInfoStep
Exemple
-
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. 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%
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
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.
-
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="">
</figure>
</li>
<li class="c-info-step-icons__item">
<figure >
<img src="images/icon-placeholder.svg" class="img-fluid" alt="">
</figure>
</li>
<li class="c-info-step-icons__item">
<figure >
<img src="images/icon-placeholder.svg" class="img-fluid" alt="">
</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="">
</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="">
</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="">
</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="">
</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="">
</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="">
</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="">
</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="">
</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
Une ligne de Formulaire...
<@cRow>
<@cCol>
<@cText><@cLink label='Visualiser un formulaire complet' href='jsp/site/Portal.jsp?page_id=8' /></@cText>
</@cCol>
</@cRow>
<div class="row ">
<div class="col ">
<p>
Une ligne de Formulaire... </p>
</div>
</div>Paramètres
Cette macro fonctionne mais a été supprimée de BS5. Pour qu'elle fonctionne à l'identique c'est en fait un doublon de la macro cRow
-
id (string)
optionnal- l'ID de la ligne de formulaire
-
class (string)
optionnal- ajoute une classe CSS à la ligne de formulaire
-
params (string)
optionnal- permet d'ajouter des parametres HTML à la ligne de 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'>
<@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' 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 ">
<div class="mb-xs">
<label class="form-label" for="reduc">
Code de réduction
</label>
<p class="form-text " id="help_reduc">
Saisir un code de réduction</p>
<input type="text" class=" form-control" name="reduc" id="reduc" value="" placeholder="Exemple: A256" aria-label="Exemple: A256" aria-describedby="help_reduc" aria-describedby="help_reduc">
</div>
</div>
</div>
<fieldset id="fieldset-id-843017709568231" role="group" aria-labelledby="legend-id-843017709568231"'>
<legend id="legend-id-843017709568231" >Bloc Adresse</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<div class="mb-xs">
<label class="form-label" for="firstName">
Prénom <span class="main-danger-color" 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>
<div class="col-12 col-sm-6 ">
<div class="mb-xs">
<label class="form-label" for="lastName126">
Nom <span class="main-danger-color" 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 ">
<div class="mb-xs">
<label class="form-label" for="adresseVoie">
Numéro et libellé de la voie <span class="main-danger-color" 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>
<div class="row ">
<div class="col-12 ">
<div class="mb-xs">
<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>
<div class="row ">
<div class="col-12 ">
<div class="mb-xs">
<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>
<div class="row ">
<div class="col-2 ">
<div class="mb-xs">
<label class="form-label" for="adresseCode">
Code postal <span class="main-danger-color" 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>
<div class="col-10 ">
<div class="mb-xs">
<label class="form-label" for="adresseVille">
Commune <span class="main-danger-color" 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>
</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' class='mt-l' 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' class='mt-l' 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 ">
<div class="mb-xs">
<label class="form-label" for="firstNameF1">
Prénom <span class="main-danger-color" 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">
</div>
</div>
<div class="col-12 col-sm-6 ">
<div class="mb-xs">
<label class="form-label" for="lastNameF1">
Nom <span class="main-danger-color" 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">
</div>
</div>
</div>
</fieldset>
<fieldset class="mt-l" 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 ">
<div class="mb-xs">
<label class="form-label" for="firstNameF2">
Prénom <span class="main-danger-color" 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">
</div>
</div>
<div class="col-12 col-sm-6 ">
<div class="mb-xs">
<label class="form-label" for="lastNameF2">
Nom <span class="main-danger-color" 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">
</div>
</div>
</div>
</fieldset>
<fieldset class="mt-l" 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 ">
<div class="mb-xs">
<label class="form-label" for="firstNameF3">
Prénom <span class="main-danger-color" 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">
</div>
</div>
<div class="col-12 col-sm-6 ">
<div class="mb-xs">
<label class="form-label" for="lastName">
Nom <span class="main-danger-color" 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">
</div>
</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
-
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 champs de formulaire
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-3 ">
<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>
<div class="row ">
<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-07-03">
<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 xlink:href="#paris-icon-agenda"></use>
</svg>
</span>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {daysOfWeekDisabled: [0,6],};
let showFormat=getDatePickerDateFormat( navigator.language );
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)
-
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
-
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
-
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
Aide
<@cFormHelp id='field' label='Aide' />
<div class="row ">
<div class="col ">
<p class="form-text " id="help_field">
Aide</p>
<input type="text" class=" form-control" name="name2" id="name2" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves">
</div>
</div>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
Exemple
Erreur
<@cRow>
<@cCol>
<@cLabel label='Prénom' for='formError' />
<@cFormError id='field' label='Erreur' />
<@cInput name='name3' type='text' placeholder='Exemple: Jean Yves' id='formError' class='form-control is-invalide' />
</@cCol>
</@cRow>
<div class="row ">
<div class="col ">
<label class="form-label" for="formError">
Prénom
</label>
<p class="invalid-feedback" id="error_field">
<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 xlink:href="#paris-icon-alert-error"></use>
</svg>
Erreur</p>
<input type="text" class=" form-control is-invalide" name="name4" id="formError" value="" placeholder="Exemple: Jean Yves" aria-label="Exemple: Jean Yves">
</div>
</div>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
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 d-flex ">
<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("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.matches('input[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
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>
<@cPasswordCheck id='pass' />
</@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 xlink:href="#paris-icon-eye"></use>
</svg>
</div>
</div>
<p class="form-text " id="help_pass">
<span class="charlength">
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-check"></use>
</svg>
8 letters</span>
<span class="uppercase">
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-check"></use>
</svg>
a capital letter </span>
<span class="digit">
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-check"></use>
</svg>
a digit</span>
</p>
</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 xlink: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
@cInputDate
Exemple
<@cRow>
<@cCol cols='3'>
<@cLabel label='Date picker' for='datepicker_10' />
<@cInputDate id='datepicker_10' label='' name='date1' value=.now?date?iso_utc />
</@cCol>
<@cCol cols='4'>
<@cLabel label='Date picker sans icone' for='datepicker_20' />
<@cInputDate id='datepicker_20' label='' name='date2' icon=false />
</@cCol>
<@cCol cols='3'>
<@cLabel label='Date picker HTML' for='datepicker_30' />
<@cInputDate id='datepicker_30' label='' name='date3' type='date' />
</@cCol>
</@cRow>
<div class="row ">
<div class="col-3 ">
<label class="form-label" for="datepicker_11">
Date picker
</label>
<!-- Warning : wrong or deprecated argument(s) : label, ... -->
<div class="input-group">
<input type="text" class=" form-control" name="date1" id="datepicker_11" value="2025-07-03">
<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 xlink:href="#paris-icon-agenda"></use>
</svg>
</span>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {daysOfWeekDisabled: [0,6],};
let showFormat=getDatePickerDateFormat( navigator.language );
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_11 = document.querySelector('#datepicker_11')
const dtOptionsdatepicker_11 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_11 = new themeParisFrDatepicker( elemdatepicker_11, dtOptionsdatepicker_11 );
});
</script>
</div>
<div class="col-4 ">
<label class="form-label" for="datepicker_22">
Date picker sans icone
</label>
<!-- Warning : wrong or deprecated argument(s) : label, ... -->
<div class="input-group">
<input type="text" class=" form-control" name="date2" id="datepicker_22" value="">
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {daysOfWeekDisabled: [0,6],};
let showFormat=getDatePickerDateFormat( navigator.language );
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_22 = document.querySelector('#datepicker_22')
const dtOptionsdatepicker_22 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_22 = new themeParisFrDatepicker( elemdatepicker_22, dtOptionsdatepicker_22 );
});
</script>
</div>
<div class="col-3 ">
<label class="form-label" for="datepicker_33">
Date picker HTML
</label>
<!-- Warning : wrong or deprecated argument(s) : label, ... -->
<div class="input-group">
<input type="date" class=" form-control" name="date3" id="datepicker_33" value="">
</div>
</div>
</div>Paramètres
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.
-
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
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 !
Zone de drop de fichiers
Attention
Pas d'upload possible sur la démo
Drop your files here or Select
Zone + liste de fichiers upload
Attention
Pas d'upload possible sur la démo
Drop your files here or Select
<@cRow>
<@cCol>
<@cLabel label='Nom' for='name4' />
<@cInput name='name4' type='text' value='Dupont' helpMsg='Saisir votre nom' />
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cText class="lead main-info-color my-m">Zone de drop de fichiers</@cText>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cField label='Justificatif de domicile' for='domicile' required=false>
<@cInputDropFiles name='files_domicile' formSubmitButtonName='doSaveForm'/>
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cText class="lead main-info-color my-m">Zone + liste de fichiers upload</@cText>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cField label='Justificatif de domicile' for='domicile' required=false>
<@cInputDropFiles name='files_domicile2' hasFiles=true formSubmitButtonName='doSaveForm'>
<@cInputDropFilesItem name='file_Upload_1' label='Mon attestation.docx' idx=1 fileSize=30 ext='DOCX' urlDl='javascript:return false;' urlRm='javascript:return false;' />
<@cInputDropFilesItem name='file_Upload_2' label='Justificatif.docx' idx=1 fileSize=60 />
</@cInputDropFiles>
</@cField>
</@cCol>
</@cRow>
<@cRow>
<@cCol>
<@cField>
<@cBtn label='Valider' class='action' id="doSaveForm"/>
<@cBtn label='Annuler' class='link-action'>
<@cIcon label='Annuler' class='undo' />
</@cBtn>
</@cField>
</@cCol>
</@cRow>
<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-1083265218934171" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-1083265218934171">Warning</title>
<use xlink: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 class="row ">
<div class="col ">
<p class="lead main-info-color my-m">
Zone de drop de fichiers</p>
</div>
</div>
<div class="row ">
<div class="col ">
<div id="toastContainer1" class="toast-container position-static p-3 ml-l w-100 d-flex justify-content-end" style="position-static">
<div id="toastFile1" 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('toastContainer1');
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>
<div class="mb-xs">
<label class="form-label" for="domicile">
Justificatif de domicile
</label>
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="row group-files dropzone no-file">
<div class="col">
<label id="lbdomicile" class="" for="domicile">Upload files <span class="main-danger-color" tabindex="0" title="Mandatory">*</span></label>
<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" data-nbuploadedfiles="0" name="files_domicile" id="domicile" multiple="multiple">
<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-left ms-sm mb-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" 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>
</div>
<div class="row ">
<div class="col ">
<p class="lead main-info-color my-m">
Zone + liste de fichiers upload</p>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="position-absolute p-sm" style="z-index:5;top:0;right:0" >
<div id="liveFileToast2" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="ms-auto">Attention</strong>
<button type="button" class="ml-xs mb-xxs close" data-bs-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white text-dark">Pas d'upload possible sur la démo</div>
</div>
</div>
<div class="mb-xs">
<label class="form-label" for="domicile2">
Justificatif de domicile
</label>
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="row 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="0" name="files_domicile2" id="domicile2" multiple="multiple">
<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-left ms-sm mb-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" 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_file_Upload_11">
<label class="files-item-label" for="_form_upload_checkbox_file_Upload_11">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_1&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_file_Upload_11" fieldName="file_Upload_1" 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_file_Upload_21">
<label class="files-item-label" for="_form_upload_checkbox_file_Upload_21">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_2&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_file_Upload_21" fieldName="file_Upload_2" 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>
<div class="row ">
<div class="col ">
<div class="mb-xs">
<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 xlink:href="#paris-icon-close"></use>
</svg>
<span class="btn-label ">Annuler</span>
</button>
</div>
</div>
</div>
<script>
// Demo only
document.addEventListener('click', function(event) {
if (event.target.closest('.deleteSingleFile')) {
event.preventDefault();
const currInput = document.getElementById('domicile2');
let nbInputFiles = currInput.getAttribute('data-nbuploadedfiles');
currInput.setAttribute('data-nbuploadedfiles', nbInputFiles);
event.preventDefault();
event.target.closest('.files-item').setAttribute('hidden', 'hidden');
}
});
document.addEventListener('click', function(event) {
if (event.target.matches('#domicile') || event.target.closest('#domicile')) {
event.preventDefault();
// Show toast using Bootstrap 5 vanilla JS
const toastElement = document.getElementById('liveFileToast');
if (toastElement) {
const toast = new bootstrap.Toast(toastElement);
toast.show();
}
// Show hidden files
const hiddenFiles = document.querySelectorAll('[hidden]');
hiddenFiles.forEach((hf) => {
hf.removeAttribute('hidden');
});
}
});
document.addEventListener('click', function(event) {
if (event.target.matches('#domicile2') || event.target.closest('#domicile2')) {
event.preventDefault();
// Show toast using Bootstrap 5 vanilla JS
const toastElement = document.getElementById('liveFileToast2');
if (toastElement) {
const toast = new bootstrap.Toast(toastElement);
toast.show();
}
// Show hidden files
const hiddenFiles = document.querySelectorAll('[hidden]');
hiddenFiles.forEach((hf) => {
hf.removeAttribute('hidden');
});
}
});
</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
-
showAllFilesBtn (number) (default : 1)
optionnal- Affiche le bouton "Selectionner tous les fichier si 1. Si 0 masque le bouton
-
nbCol (number) (default : 1)
optionnal- Modifie l'affichage en 1 ou 2 colonnes
-
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 class="mb-xs" 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-1175507722056151" name="rRadio" class="form-check-input" value="1">
<label class="form-label form-check-label" for="rRadio-1175507722056151">
Yes
</label>
</div>
<div class="form-check">
<input type="radio" id="rRadio-1182525043707721" name="rRadio" class="form-check-input" value="2">
<label class="form-label form-check-label" for="rRadio-1182525043707721">
No
</label>
</div>
<div class="form-check">
<input type="radio" id="rRadio-1189542365359291" name="rRadio" class="form-check-input" value="3" disabled>
<label class="form-label form-check-label" for="rRadio-1189542365359291">
Disabled
</label>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="mb-xs" 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-1196559687010861" name="rRadio" class="form-check-input" value="1">
<label class="form-label form-check-label" for="rRadio-1196559687010861">
Yes
</label>
</div>
<div class="form-check is-invalid">
<input type="radio" id="rRadio-1203577008662431" name="rRadio" class="form-check-input" value="4" aria-invalid="true">
<label class="form-label form-check-label" for="rRadio-1203577008662431">
No
</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 xlink:href="#paris-icon-alert-error"></use>
</svg>
Une erreur s'est produite !</p>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<!-- Column -->
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1217611651965571" role="radiogroup" aria-describedby="help_radioHelp3" role="group" aria-labelledby="legend-id-1217611651965571"'>
<legend id="legend-id-1217611651965571" >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 class="mb-xs" 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-1225628973617141" name="selectionRadio" class="form-check-input" value="1">
<label class="form-label form-check-label" for="selectionRadio-1225628973617141">
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-1233646295268711" name="selectionRadio" class="form-check-input" value="2">
<label class="form-label form-check-label" for="selectionRadio-1233646295268711">
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
-
type (string) ('radio' / 'radio' | 'button')
optionnal- Par défaut prend l'aspect d'un radio, si "button" prend l'aspect d'un bouton
-
value (string) (default :'text')
optionnal- Valeur par défaut
-
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-1300784868481271" aria-describedby="help_checkboxHelp1" role="group" aria-labelledby="legend-id-1300784868481271"'>
<div class="mb-xs">
<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="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>
</div>
</fieldset>
</div>
</div>
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1309802190132841" aria-describedby="help_checkboxHelp2" role="group" aria-labelledby="legend-id-1309802190132841"'>
<div class="mb-xs">
<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="judo4" name="sport" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="judo4">
Judo
</label>
</div>
<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>
<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 xlink:href="#paris-icon-alert-error"></use>
</svg>
Erreur dans le sport !</p>
</div>
</fieldset>
</div>
</div>
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1327836833435981" aria-describedby="help_selectHelp" role="group" aria-labelledby="legend-id-1327836833435981"'>
<div class="mb-xs">
<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>
</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é associé é la valeur
-
type (string) ( 'checkbox' / 'checkbox' | 'button')
optionnal- Par défaut prend l'aspect d'une checkbox, si "button" prend l'apsect d'un bouton
-
value (string) (default :'text')
optionnal- Valeur par défaut
-
btnClass (string) (default :'x')
optionnal- Attribut class pour le bouton, si l'attribut "type" est "button" New
-
selectionButton (boolean) (default :'false' )
optionnal- Peut venir en substitution d’une checkbox, permettant de choisir une ou plusieurs options détaillées parmi une liste.
-
selectionLabel (string) (default :'' )
optionnal- En complément de l'attribut selectionButton, permet de donner des détails sur la sélection
-
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 de la checkbox (false) ou le label englobant les checkbox (true) (par défaut: true)
-
helpMsg (string) (default :'')
optionnal- Message d'aide New
-
errorMsg (string) (default :'')
optionnal- Message d'erreur New
-
class (string) (default :'custom-checkbox')
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='football3' label='Football' value='foot' />
<@cFormCheck type='checkbox' name='sport' id='natation3' label='Natation' value='nata' />
<@cFormCheck type='checkbox' name='sport' id='tennis3' 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='judo4' 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-1337440763345401" aria-describedby="help_formcheck1" role="group" aria-labelledby="legend-id-1337440763345401"'>
<div class="mb-xs">
<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>
</div>
</fieldset>
</div>
</div>
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-1337558084996971" aria-describedby="help_formcheckradio2" role="group" aria-labelledby="legend-id-1337558084996971"'>
<div class="mb-xs">
<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="judo4" name="sport" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="judo4">
Judo
</label>
</div>
<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>
<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 xlink:href="#paris-icon-alert-error"></use>
</svg>
Erreur dans le sport !</p>
</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é associé é la valeur
-
type (string) ( 'radio' | 'checkbox' | 'button')
required- Par défaut prend l'aspect d'une checkbox, si "button" prend l'apsect d'un bouton
-
value (string) (default :'text')
optionnal- Valeur par défaut
-
btnClass (string) (default :'x')
optionnal- Attribut class pour le bouton, si l'attribut "type" est "button" New
-
selectionButton (boolean) (default :'false' )
optionnal- Peut venir en substitution d’une checkbox, permettant de choisir une ou plusieurs options détaillées parmi une liste.
-
selectionLabel (string) (default :'' )
optionnal- En complément de l'attribut selectionButton, permet de donner des détails sur la sélection
-
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 de la checkbox (false) ou le label englobant les checkbox (true) (par défaut: true)
-
helpMsg (string) (default :'')
optionnal- Message d'aide New
-
errorMsg (string) (default :'')
optionnal- Message d'erreur New
-
class (string) (default :'custom-checkbox')
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='' value='0' />
<@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-sm">
<@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-sm">
<@cCol params='aria-describedby="cOptGroup"'>
<@cField label='Catégories'>
<@cSelect name=''>
<@cOption label='' 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>
<@cFormHelp id='cOptGroup' label='Aide OptGroup' />
</@cField>
</@cCol>
</@cRow>
<div class="row ">
<div class="col " aria-describedby="cSelect">
<div class="mb-xs">
<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="" >
<option value="0"></option>
<option value="1">Paris (75000)</option>
<option value="2">Parigné-l Eveque (72250)</option>
<option value="3">Parigné (35133)</option>
<option value="4">Parigné-le-Polin (72330)</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="row mt-sm">
<div class="col ">
<div class="mb-xs">
<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>
<div class="row mt-sm">
<div class="col " aria-describedby="cOptGroup">
<div class="mb-xs">
<label class="form-label">
Catégories
</label>
<select name="" class="form-select" disabled>
<option value="0">Pas de sélection possible</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>
<p class="form-text " id="help_cOptGroup">
Aide OptGroup</p>
</div>
</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
-
id (string) (default :'')
optionnal- Identifiant unique, égal à l'attribut name si non renseigné
-
params (string) (default :'listbox')
optionnal- N'importe quel attribut HTML
-
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)
-
helpMsg (string) (default :'')
optionnal- Message d'aide
-
errorMsg (string) (default :'')
optionnal- Message d'erreur.
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 ">
<div class="mb-xs">
<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" 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" 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" 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" for="ms-1-option4">
Option 4
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-m">
<div class="col ">
<div class="mb-xs">
<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-1410617909770521" autocomplete="off" value="option1">
<label class="form-label btn btn-outline-primary" for="multiSelectExample-1410617909770521">
Option 1
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1417035231422091" autocomplete="off" value="option2">
<label class="form-label btn btn-outline-primary" for="multiSelectExample-1417035231422091">
Option 2
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1423452553073661" autocomplete="off" value="option3">
<label class="form-label btn btn-outline-primary" for="multiSelectExample-1423452553073661">
Option 3
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1429869874725231" autocomplete="off" value="option4" disabled>
<label class="form-label btn btn-outline-primary" for="multiSelectExample-1429869874725231">
Option 4
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="mb-xs">
<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-1436287196376801" autocomplete="off" value="option1">
<label class="form-label btn btn-outline-primary" for="multiSelectExample-1436287196376801">
Option 1
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1442704518028371" autocomplete="off" value="option2">
<label class="form-label btn btn-outline-primary" for="multiSelectExample-1442704518028371">
Option 2
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1449121839679941" autocomplete="off" value="option3">
<label class="form-label btn btn-outline-primary" for="multiSelectExample-1449121839679941">
Option 3
</label>
</li>
<li>
<input type="checkbox" name="multiSelectExample" class="btn-check" id="multiSelectExample-1455539161331511" autocomplete="off" value="option4" disabled>
<label class="form-label btn btn-outline-primary" for="multiSelectExample-1455539161331511">
Option 4
</label>
</li>
</ul>
</div>
</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-baseline">
<h2 class="title" 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 pl-2">
<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">
<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.
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>
<@cRow>
<@cCol>
<@cBtn type='button' id='valid' label='Etape suivante' class='btn btn-primary' />
</@cCol>
</@cRow>
</@cStepCurrent>
<section class="step step-current " id="current_step">
<section 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>
</section>
<div class="container">
<section class="step-content">
<p class="mandatory-warning visually-hidden">
Fields followed by an asterisk * are mandatory.</p>
<fieldset id="fieldset-id-1512460412892501" role="group" aria-labelledby="legend-id-1512460412892501"'>
<legend class="visually-hidden" id="legend-id-1512460412892501" >Informations générales</legend>
<div class="row ">
<div class="col ">
<div class="mb-xs">
<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>
<div class="col ">
<div class="mb-xs">
<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>
</div>
</fieldset>
<fieldset id="fieldset-id-1520877734544071" role="group" aria-labelledby="legend-id-1520877734544071"'>
<legend class="visually-hidden" id="legend-id-1520877734544071" >Choix de conservation des données</legend>
<div class="row ">
<div class="col " aria-describedby="mydata">
<div class="mb-xs">
<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>
</div>
</fieldset>
<div class="row ">
<div class="col ">
<button class="btn btn-btn btn-primary" type="button" id="valid">
<span class="btn-label ">Etape suivante</span>
</button>
</div>
</div>
<div class="row ">
<div class="col-12 col-md-10 ">
<p class="mandatory-warning">
Fields followed by an asterisk * are mandatory.</p>
</div>
</div>
<div class="row ">
<div class="col-12 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 mt-xs ms-sm" type="submit" id="valid" name="valid">
<span class="btn-label ">Previous step</span>
</button>
</li>
</ul>
</div>
</div>
</section>
</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">
Supprimer la sauvegarde</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 ">Non revenir sur ma démarche</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Oui supprimer les 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 = 'Supprimer la sauvergarde';
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('');
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é.- titleForBackUpStep (string) (default : '')
optionnal- Attribut title d'aide pour l'accesibilité pour l'action "Sauvegarder".- labelForBackUpStep (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
Fields followed by an asterisk * are mandatory.
<@cStepGroup title='Information' help=''>
<@cRow>
<@cCol>
<@cField label='Nom' for='name6' labelData='<small class="text-muted">(Nom de famille)</small>'>
<@cInput name='name6' placeholder='Exemple: Durand' />
<@cFormHelp id='name6' label='Saisir votre nom de famille' />
</@cField>
</@cCol>
<@cCol>
<@cField label='Prénom' for='firstname-group'>
<@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>'>
<@cInput name='name7' placeholder='Exemple: Durand' />
<@cFormHelp id='name7' label='Saisir votre nom de famille' />
</@cField>
</@cCol>
<@cCol>
<@cField label='Prénom' for='firstname-group-2'>
<@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">
<section 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>
</section>
<div class="container">
<section class="step-content">
<p class="mandatory-warning visually-hidden">
Fields followed by an asterisk * are mandatory.</p>
<div class="row ">
<div class="col ">
<div class="container">
<fieldset class="w-100 flex-fill row step-group " id="fieldset-id-1546333629408201" role="group" aria-labelledby="legend-id-1546333629408201"'>
<legend class="col-12 " >
<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 ">
<div class="mb-xs">
<label class="form-label" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand">
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
</div>
</div>
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="firstname">
Prénom
</label>
<input type="text" class=" form-control" name="firstname" id="firstname" value="">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<hr>
<p class="lead">
Contenu d'une étape avec au moins une itération</p>
<div class="row ">
<div class="col ">
<div class="container">
<fieldset class="w-100 flex-fill row step-group " id="fieldset-id-1547850951059771" role="group" aria-labelledby="legend-id-1547850951059771"'>
<legend class="col-12 d-flex justify-content-between align-items-center" >
<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 xlink: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 xlink:href="#paris-icon-plus"></use>
</svg>
<span class="btn-label">
Add</span>
</button>
</div>
</span>
</legend>
<div class="row ">
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="name635">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<input type="text" class=" form-control" name="name635" id="name635" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand">
<p class="form-text " id="help_name635">
Saisir votre nom de famille</p>
</div>
</div>
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="firstname-2">
Prénom
</label>
<input type="text" class=" form-control" name="firstname-2" id="firstname-2" value="">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="row ">
<div class="col-12 col-md-10 ">
<p class="mandatory-warning">
Fields followed by an asterisk * are mandatory.</p>
</div>
</div>
<div class="row ">
<div class="col-12 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 mt-xs ms-sm" type="submit" id="valid" name="valid">
<span class="btn-label ">Previous step</span>
</button>
</li>
</ul>
</div>
</div>
</section>
</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">
Supprimer la sauvegarde</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 ">Non revenir sur ma démarche</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Oui supprimer les 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 = 'Supprimer la sauvergarde';
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('');
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
France Connect
Les paramètres fcBtnImg
-
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 fcImg
-
label (string)
optionnal- Texte souhaité, 'Créer', 'Supprimer'...
Les paramètres fcMessage
- #nested : Contenu à afficher à l'intérieur du message.
Exemple
<@cText class='mb-sm'>
<@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-sm'>
<@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">
<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 xlink: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 xlink: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
-
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 xlink: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 xlink: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 xlink: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 xlink: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
<@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-1635783992349021" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-1635783992349021">Error</title>
<use xlink: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
44 résultats
<#assign checkboxes = [
{"title":"Filter 1", "id":"filter1"},
{"title":"Filter 2", "id":"filter2"},
{"title":"Filter 3", "id":"filter3"}
]>
<@cFilter checkboxes=checkboxes result='44 résultats' />
<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 xlink: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-1670887922258441" role="group" aria-labelledby="legend-id-1670887922258441"'>
<legend class="visually-hidden" id="legend-id-1670887922258441" >Liste de filtres</legend>
<div class="mt-0">
<div class=" me-3 pt-3 pb-4 px-3 form-check 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>
<div class="mt-0">
<div class=" me-3 pt-3 pb-4 px-3 form-check 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>
<div class="mt-0">
<div class=" me-3 pt-3 pb-4 px-3 form-check 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>
</div>
</fieldset>
<button class="btn btn-primary h-100 w-auto" type="submit">
<span class="btn-label ">Rechercher</span>
</button>
<button class="btn btn-tertiary h-100 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>Paramètres
Voici la liste des différents paramètres de la macro :
-
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
Exemple
Contenu Tab 1
Contenu Tab 2
Contenu Tab 3
Contenu Tab 4
<@cTabs>
<@cTab url='#TabContent1' active=true>Onglet 1</@cTab>
<@cTab url='#TabContent2'>Onglet 2 </@cTab>
<@cTab url='#TabContent3'>Onglet 3</@cTab>
<@cTab url='#TabContent4'>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" 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>
</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>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
-
title (string)
optionnal- permet de définir le titre du panneau affiché en mobile
-
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
@cPagination
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 xlink: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 xlink: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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<#assign anchors = [
{"label":"Item 1", "href":"#anchor-scroll-item-xxs"},
{"label":"Item 2", "href":"#anchor-scroll-item-2"},
{"label":"Item 3", "href":"#anchor-scroll-item-3"},
{"label":"Item 4", "href":"#anchor-scroll-item-4"},
{"label":"Item 5", "href":"#anchor-scroll-item-5"}
]>
<@cRow>
<@cCol cols='3'>
<@cAnchor id='scrollspy-list-example' class='position-sticky' anchors=anchors listClass='list-unstyled' listItemClass='ps-sm py-sm' params='style="top:100px"' />
</@cCol>
<@cCol>
<@cBlock params='data-bs-spy="scroll" data-bs-target="#scrollspy-list-example" tabindex="0"'>
<@cTitle level=4 id="anchor-scroll-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>
<@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.</@cText>
<@cTitle level=4 id="anchor-scroll-item-2" class="mt-sm">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>
<@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.</@cText>
<@cTitle level=4 id="anchor-scroll-item-3" class="mt-sm">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>
<@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.</@cText>
<@cTitle level=4 id="anchor-scroll-item-4" class="mt-sm">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>
<@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.</@cText>
<@cTitle level=4 id="anchor-scroll-item-5" class="mt-sm">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>
<@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.</@cText>
</@cBlock>
</@cCol>
</@cRow>
<div class="row ">
<div class="col-3 ">
<div class="anchors position-sticky" id="scrollspy-list-example" style="top:100px">
<ul class="list-unstyled" >
<li class="ps-sm py-sm">
<a href="#anchor-scroll-item-xxs" >
<span class="link-label">Item 1</span>
</a>
</li>
<li class="ps-sm py-sm">
<a href="#anchor-scroll-item-2" >
<span class="link-label">Item 2</span>
</a>
</li>
<li class="ps-sm py-sm">
<a href="#anchor-scroll-item-3" >
<span class="link-label">Item 3</span>
</a>
</li>
<li class="ps-sm py-sm">
<a href="#anchor-scroll-item-4" >
<span class="link-label">Item 4</span>
</a>
</li>
<li class="ps-sm py-sm">
<a href="#anchor-scroll-item-5" >
<span class="link-label">Item 5</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col ">
<div data-bs-spy="scroll" data-bs-target="#scrollspy-list-example" tabindex="0">
<h4 class="mt-0" id="anchor-scroll-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>
<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.</p>
<h4 class="mt-sm" id="anchor-scroll-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>
<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.</p>
<h4 class="mt-sm" id="anchor-scroll-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>
<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.</p>
<h4 class="mt-sm" id="anchor-scroll-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>
<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.</p>
<h4 class="mt-sm" id="anchor-scroll-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>
<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.</p>
</div>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
-
data-bs-spy (string)
required- permet d'activer le scrollspy
-
data-bs-target (string)
required- permet de définir la cible du scrollspy
Aide
Ce composant n'est pas une macro car il se base sur le scrollspy de Bootstrap qui est utilisable uniquement via des attributs HTML à ajouter sur d'autres composants/macros déjà existants (anchors)
D'autres paramètres sont disponibles sur la documentation de Bootstrap en plus de ceux disponibles ci-dessus: Documentation Scrollspy Bootstrap
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
<#assign mySlides = [
{"content":"Content 1","linkLabel":"Title 1", "img":"images/adrien-xplr-wAScP0OY-yM-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 2", "linkLabel":"Title 2", "img":"images/alexander-kagan-t9Td0zfDTwI-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 3", "linkLabel":"Title 3", "img":"images/paul-dufour-5XndD3FhH-w-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 4", "linkLabel":"Title 4", "img":"images/adrien-xplr-wAScP0OY-yM-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 5", "linkLabel":"Title 5", "img":"images/alexander-kagan-t9Td0zfDTwI-unsplash.png", "link":"https://paris.fr"},
{"content":"Content 6", "linkLabel":"Title 6", "img":"images/paul-dufour-5XndD3FhH-w-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 xlink: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 xlink: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>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 (string)
optionnal- Objet contenant les slides ( voir les attributs ci-dessous )
-
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
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
-
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
Aide
Permet de créer un carousel. A utiliser avec la Macro cCarouselItem
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="urlname?sorted_attribute_name=attrname&asc_sort=false#sort_attrname" 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 xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-2" >
Couleur<a href="urlname?sorted_attribute_name=attrname&asc_sort=false#sort_attrname" 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 xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-3" >
Stations principales<a href="urlname?sorted_attribute_name=attrname&asc_sort=false#sort_attrname" 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 xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</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.textContent : '';
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 " class='m-0'>
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccheadingtable1` + index + `" aria-expanded="false" 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="false" 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 xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccheadingtable1` + index + `" class="m-0 collapse " 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="false" 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>
<h3>
Exemple sans "id"</h3>
<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-1856659536760251" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-1856659536760251">Warning</title>
<use xlink:href="#paris-icon-alert-warning"></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="urlname?sorted_attribute_name=attrname&asc_sort=false#sort_attrname" 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 xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-2" >
Valeur<a href="urlname?sorted_attribute_name=attrname&asc_sort=false#sort_attrname" 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 xlink: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.textContent : '';
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 " class='m-0'>
<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 xlink: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>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)
-
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
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 class='mt-l'>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 class='mt-l'>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 class='mt-l'>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 class='mt-l'>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 class='mt-l'>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 class="mt-l">
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 class="mt-l">
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 class="mt-l">
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 class="mt-l">
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 class="mt-l">
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 xlink: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 xlink: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 xlink: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 xlink: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
Exemple
Popover sur lien
Voici un lien avec un Popover : Le Popover est visible en hover .
Popover sur bouton
Popover sur bouton désactivé
<@cBlock>
<@cTitle level=4 class='mt-l'>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 class='mt-l'>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 class="mt-l">
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>
</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 class="mt-l">
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.
Skeleton
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