Thème Paris.fr - Composants

@cAccordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Exemple

Titre de l'accordéon ...et son sous-titre

Contenu de l'accordéon

accordéon avec titleClass et header...

Header

Contenu de l'accordéon

accordéon avec bouton action Sous titre

Contenu de l'accordéon type "Info"

accordéon avec outline

Contenu de l'accordéon type "Info"

accordéon collapse

Contenu de l'accordéon type "Déplié"

accordéon avec alert primary outline

Contenu de l'accordéon type "Info"

accordéon avec alert primary outline Voir le détail

Contenu de l'accordéon type "Info"

accordéon avec alert primary outline Voir le détail

Contenu de l'accordéon type "Info"

accordéon avec alert primary outline Voir le détail

Contenu de l'accordéon type "Info"

Exemple avec bordure ...et son sous-titre

Contenu de l'accordéon

Extrait de code Macro

<@cCard title='' class='gray-light-bg-color p-3' >
	<@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>

Extrait de code HTML

<div class="card gray-light-bg-color p-3">
<div class="card-body">
<div class="accordion" id="accacc1" >
<div class="card with-subtitle" >
<div 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-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion btn-secondary">
<svg class="paris-icon paris-icon-arrow-bottom btn-secondary" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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" >
<div 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-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</div>
<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) optionnal new - 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) optionnal new - gérer le texte du parametre "data-show-label" de l'accordion (par défaut: 'Show details')
btnHideLabel (string) optionnal new - 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...

Contenu du message "warning"

Message validation...

Confirmation...

Message validation...

Confirmation...

Extrait de code Macro

<@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>

Extrait de code HTML

<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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>
<p class="alert-content">
</p>
</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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message erreur</p>
</div>
</div>
<p class="alert-content">
</p>
</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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message d'erreur</p>
</div>
</div>
<p class="alert-content">
Contenu de l'erreur</p>
</div>
<div class="alert alert-outline alert-danger alert-dismissible fade show" role="alert">
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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 type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<p class="alert-content">
Message d'erreur et bouton de fermeture</p>
</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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message attention...</p>
</div>
</div>
<p class="alert-content">
</p>
</div>
<div class="alert alert-outline alert-warning alert-dismissible fade show" role="alert">
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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 type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<p class="alert-content">
Contenu du message "warning"</p>
</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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-alert-check"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message validation...</p>
</div>
</div>
<p class="alert-content">
Confirmation...</p>
</div>
<div class="alert alert-outline alert-success alert-dismissible fade show" role="status">
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-check" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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 type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<p class="alert-content">
Confirmation...</p>
</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: true)
params (string) optionnal - permet d'ajouter des parametres HTML à l'alert

@cAnchor

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

Item 3

Item 4

Item 5

Extrait de code Macro

	<#assign anchors = [
	{"label":"Item 1", "href":"#anchor-list-item-1"},
	{"label":"Item 2", "href":"#anchor-list-item-2"},
	{"label":"Item 3", "href":"#anchor-list-item-3"},
	{"label":"Item 4", "href":"#anchor-list-item-4"},
	{"label":"Item 5", "href":"#anchor-list-item-5"}
	]>
	<@cRow>
		<@cCol cols="12 col-sm-3">
			<@cAnchor anchors=anchors/>
		</@cCol>
		<@cCol>
			<@cTitle level=4 id="anchor-list-item-1" 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-3">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-3">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-3">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-3">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>

Extrait de code HTML

<div class="row ">
<div class="col-12 col-sm-3 ">
<div id="" class="anchors ">
<ul >
<li>
<a href="#anchor-list-item-1" >
<span class="link-label">Item 1</span>
</a>
</li>
<li>
<a href="#anchor-list-item-2" >
<span class="link-label">Item 2</span>
</a>
</li>
<li>
<a href="#anchor-list-item-3" >
<span class="link-label">Item 3</span>
</a>
</li>
<li>
<a href="#anchor-list-item-4" >
<span class="link-label">Item 4</span>
</a>
</li>
<li>
<a href="#anchor-list-item-5" >
<span class="link-label">Item 5</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col scrollspy-example">
<h4 class="mt-0" id="anchor-list-item-1">
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-3" 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-3" 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-3" 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-3" 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

Extrait de code Macro

<@cBadge label='Badge example' />
<@cBadge label='Badge example' dismissible=true />
<@cBadge label='Badge example' class='badge-secondary' />

Extrait de code HTML

<div class="badge ">
<p class="badge-label">Badge example</p>
</div>
<div class="badge ">
<p class="badge-label">Badge example</p>
<button type="button" class="btn-close" onclick="this.parentElement.style.display='none';" aria-label="Fermer"></button>
</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
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

@cBtn

Exemple

btn-primary href

Extrait de code Macro

<@cBlock>
    <@cBtn label='btn-primary' class='primary m-1' />
    <@cBtn label='btn-primary disabled' class='primary m-1' disabled=true />
    <@cBtn label='btn-secondary' class='secondary m-1' />
    <@cBtn label='btn-secondary disabled' class='secondary m-1' disabled=true />
    <@cBtn label='btn-tertiary' class='tertiary m-1' />
    <@cBtn label='btn-tertiary disabled' class='tertiary m-1' disabled=true />
    <@cBtn label='btn-danger' class='danger m-1' />
    <@cBtn label='btn-danger disabled' class='danger m-1' disabled=true />
</@cBlock>
<@cBlock>
    <@cBtn label='btn-expand' class='expand m-1' />
    <@cBtn label='btn-expand disabled' class='expand m-1' disabled=true />
</@cBlock>
<@cBlock>
    <@cBtn label='btn-primary' class='primary m-1' size="mini" />
    <@cBtn label='btn-primary disabled' class='primary m-1' size="mini" disabled=true />
    <@cBtn label='btn-secondary' class='secondary m-1' size="mini" />
    <@cBtn label='btn-secondary disabled' class='secondary m-1' size="mini" disabled=true />
    <@cBtn label='btn-tertiary' class='tertiary m-1' size="mini" />
    <@cBtn label='btn-tertiary disabled' class='tertiary m-1' size="mini" disabled=true />
    <@cBtn label='btn-danger' class='danger m-1' size="mini" />
    <@cBtn label='btn-danger disabled' class='danger m-1' size="mini" disabled=true />
</@cBlock>
<@cBlock>
    <@cBtn label='btn-primary btnClass' class='primary m-1' btnClass="custom-class" />
    <@cBtn label='btn-primary noClass' class='btn btn-primary m-1' noclass=true />
    <@cBtn label='btn-primary href' class='primary m-1' href="#" />
    <@cBtn label='btn-primary nestedPos-before' class='primary m-1' nestedPos="before">Before : </@cBtn>
    <@cBtn label='btn-primary nestedPos-after : ' class='primary m-1' nestedPos="after"> After</@cBtn>
</@cBlock>

Extrait de code HTML

<div>
<button class="btn btn-primary m-1" type="submit">
<span class="btn-label ">btn-primary</span>
</button>
<button class="btn btn-primary m-1" type="submit" disabled>
<span class="btn-label ">btn-primary disabled</span>
</button>
<button class="btn btn-secondary m-1" type="submit">
<span class="btn-label ">btn-secondary</span>
</button>
<button class="btn btn-secondary m-1" type="submit" disabled>
<span class="btn-label ">btn-secondary disabled</span>
</button>
<button class="btn btn-tertiary m-1" type="submit">
<span class="btn-label ">btn-tertiary</span>
</button>
<button class="btn btn-tertiary m-1" type="submit" disabled>
<span class="btn-label ">btn-tertiary disabled</span>
</button>
<button class="btn btn-danger m-1" type="submit">
<span class="btn-label ">btn-danger</span>
</button>
<button class="btn btn-danger m-1" type="submit" disabled>
<span class="btn-label ">btn-danger disabled</span>
</button>
</div>
<div>
<button class="btn btn-expand m-1" type="submit">
<span class="btn-label ">btn-expand</span>
</button>
<button class="btn btn-expand m-1" type="submit" disabled>
<span class="btn-label ">btn-expand disabled</span>
</button>
</div>
<div>
<button class="btn btn-primary m-1 btn-mini" type="submit">
<span class="btn-label ">btn-primary</span>
</button>
<button class="btn btn-primary m-1 btn-mini" type="submit" disabled>
<span class="btn-label ">btn-primary disabled</span>
</button>
<button class="btn btn-secondary m-1 btn-mini" type="submit">
<span class="btn-label ">btn-secondary</span>
</button>
<button class="btn btn-secondary m-1 btn-mini" type="submit" disabled>
<span class="btn-label ">btn-secondary disabled</span>
</button>
<button class="btn btn-tertiary m-1 btn-mini" type="submit">
<span class="btn-label ">btn-tertiary</span>
</button>
<button class="btn btn-tertiary m-1 btn-mini" type="submit" disabled>
<span class="btn-label ">btn-tertiary disabled</span>
</button>
<button class="btn btn-danger m-1 btn-mini" type="submit">
<span class="btn-label ">btn-danger</span>
</button>
<button class="btn btn-danger m-1 btn-mini" type="submit" disabled>
<span class="btn-label ">btn-danger disabled</span>
</button>
</div>
<div>
<button class="btn btn-primary m-1" type="submit">
<span class="btn-label custom-class">btn-primary btnClass</span>
</button>
<button class="btn btn-primary m-1" type="submit">
<span class="btn-label ">btn-primary noClass</span>
</button>
<a href="#" class="btn btn-primary m-1" >
<span class="btn-label ">btn-primary href</span>
</a>
<button class="btn btn-primary m-1" type="submit">
Before : <span class="btn-label ">btn-primary nestedPos-before</span>
</button>
<button class="btn btn-primary m-1" type="submit">
<span class="btn-label ">btn-primary nestedPos-after : </span> After
</button>
</div>

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

@cBtnImg

Exemple

Extrait de code Macro

<@cBlock>
   <@cBtnImg src='images/feed.png' title='France Connect' class='link-action' imgPos='after'>
       Actualités - Flux RSS
   </@cBtnImg>
</@cBlock>
<@cBlock>
   <@cBtnImg src='images/feed.png' title='France Connect' class='link-action' imgPos='before'>
       Actualités - Flux RSS
   </@cBtnImg>
</@cBlock>
<@cBlock>
   <@cBtnImg src='images/feed.png' title='France Connect' class='link-action' disabled=true imgPos='before'>
       Actualités - Flux RSS
   </@cBtnImg>
</@cBlock>

Extrait de code HTML

<div>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<button class="btn btn-link-action btn-img" type="submit">
<span>
Actualités - Flux RSS
</span>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/feed.png" alt="" class="after">
</button>
</div>
<div>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<button class="btn btn-link-action btn-img" type="submit">
<img src="images/feed.png" alt="" class="img-fluid">
<span>
Actualités - Flux RSS
</span>
</button>
</div>
<div>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<button class="btn btn-link-action btn-img" type="submit" disabled>
<img src="images/feed.png" alt="" class="img-fluid">
<span>
Actualités - Flux RSS
</span>
</button>
</div>

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)

@cBtnGroup

Exemple

Example 1

Example 2

Extrait de code Macro

<@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>

Extrait de code HTML

<h4 class="mt-l">
Example 1</h4>
<div>
<div class="btn-group" role="group" aria-label="Menu Accueil">
<ul class="list-unstyled d-flex" >
<li>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li>
<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" >
<li class="mt-0">
<button class="btn btn-primary w-100" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="mt-0">
<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
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

@cBtnToolbar

Exemple

Example 1

Example 2

Example 3

Extrait de code Macro

<#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-3 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-3 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>

Extrait de code HTML

<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" >
<li>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li>
<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" >
<li>
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
</li>
<li>
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
</li>
<li>
<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" >
<li>
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li>
<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" >
<li>
<button class="btn btn-primary" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
</li>
<li>
<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-3 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" >
<li>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li>
<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" >
<li>
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
</li>
<li>
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
</li>
<li>
<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" >
<li>
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li>
<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" >
<li>
<button class="btn btn-primary" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
</li>
<li>
<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-3 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" >
<li class="mt-0">
<button class="btn btn-secondary w-100" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="mt-0">
<button class="btn btn-secondary w-100" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="mt-0">
<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" >
<li class="mt-0">
<button class="btn btn-secondary w-100" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
</li>
<li class="mt-0">
<button class="btn btn-secondary w-100" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
</li>
<li class="mt-0">
<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" >
<li class="mt-0">
<button class="btn btn-primary w-100" type="submit">
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="mt-0">
<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" >
<li class="mt-0">
<button class="btn btn-primary w-100" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
</li>
<li class="mt-0">
<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

@cModal

Exemple

<@cBtn label='Modal_01' class='primary m-1' 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-1" type="submit"><span class="btn-label">Text example</span></button><button class="btn btn-primary m-1" type="submit"><span class="btn-label">Text example</span></button>'>
<@cText>Contenu de la modal</@cText>
</@cModal>
<@cBtn label='Modal_02' class='primary m-1' 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-1" type="submit"><span class="btn-label">Text example</span></button>'>
<@cText>Contenu de la modal</@cText>
</@cModal>
<@cBtn label='Modal 3' class='primary m-1' 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-1" 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-1" type="submit" data-bs-toggle="modal" data-bs-target="#example1Modal">
<span class="btn-label ">Modal 1</span>
</button>
<button class="btn btn-primary m-1" type="submit" data-bs-toggle="modal" data-bs-target="#example2Modal">
<span class="btn-label ">Modal 2</span>
</button>
<button class="btn btn-primary m-1" type="submit" data-bs-toggle="modal" data-bs-target="#example3Modal">
<span class="btn-label ">Modal 3</span>
</button>

Paramètres

@cCarousel

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

Le hasard

Fait bien

Mais pas que...

Les choses

Example 4

Le hasard

Fait bien

Mais pas que...

Les choses

Example 5

Le hasard

Fait bien

Mais pas que...

Les choses

Extrait de code Macro

<@cTitle level=4 class='mt-l'>Example 1</@cTitle>
<@cCarousel id='manege1' items='' labelPrev='' labelNext=''>
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' active=true title='Le hasard' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Fait bien' subtitle='Mais pas que...' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Les choses' />
</@cCarousel>
<@cTitle level=4 class='mt-l'>Example 2</@cTitle>
<@cCarousel id='manege2' items='' controls=true labelPrev='' labelNext=''>
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' active=true title='Le hasard' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Fait bien' subtitle='Mais pas que...' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' 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='https://picsum.photos/id/10/2500/1667' active=true title='Le hasard' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Fait bien' subtitle='Mais pas que...' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Les choses' />
</@cCarousel>
<@cTitle level=4 class='mt-l'>Example 4</@cTitle>
<@cCarousel id='manege4' items='' slideControls=true labelPrev='' labelNext=''>
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' active=true title='Le hasard' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Fait bien' subtitle='Mais pas que...' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' 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='https://picsum.photos/id/10/2500/1667' active=true title='Le hasard' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Fait bien' subtitle='Mais pas que...' />
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Les choses' />
</@cCarousel>

Extrait de code HTML

<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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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="manege4" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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="manege5" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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="https://picsum.photos/id/10/2500/1667" 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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

@cCascading

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*

Extrait de code Macro

<@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>

Extrait de code HTML

<details id='cascad1' class="cascading " open>
<summary><span class='cascading-label'>nested 1</span></summary>
<div class='cascading-content'> <details id='cascad2' class="cascading " >
<summary><span class='cascading-label'>nested 2</span></summary>
<div class='cascading-content'>
<p>
Contenu</p>
</div>
</details>
<details id='cascad3' class="cascading " >
<summary><span class='cascading-label'>nested 3</span></summary>
<div class='cascading-content'>
<p>
Contenu</p>
</div>
</details>
<details id='cascad4' class="cascading " >
<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 " >
<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" >
<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" >
<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" >
<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>
<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

@cCard

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.

Extrait de code Macro

<@cTitle level=4 class='mt-l'>Vertical</@cTitle>
<ul class="list-unstyled">
	<li>
		<@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-right"><@cBtn label='Text example' class='primary' /></@cText>
		</@cCard>
	</li>
	<li>
		<@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>
	</li>
	<li>
		<@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' />
	</li>
	<li>
		<@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-right"><@cBtn label='Text example' class='primary' /></@cText>
		</@cCard>
	</li>
</ul>

<@cTitle level=4 class='mt-l'>Vertical Secondary</@cTitle>
<ul class="list-unstyled">
	<li>
		<@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-right"><@cBtn label='Text example' class='primary' /></@cText>
		</@cCard>
	</li>
	<li>
		<@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>
	</li>
	<li>
		<@cCard class='secondary' title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' />
	</li>
	<li>
		<@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-right"><@cBtn label='Text example' class='primary' /></@cText>
		</@cCard>
	</li>
</ul>
<@cTitle level=4 class='mt-l'>Horizontal</@cTitle>
<ul class="list-unstyled">
	<li>
		<@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-3 text-right' />
			</@cBlock >
		</@cCard>
	</li>
	<li>
		<@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>
	</li>
	<li>
		<@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-3 text-right' />
			</@cBlock >
		</@cCard>
	</li>
</ul>
<@cTitle level=4 class='mt-l'>Horizontal Secondary</@cTitle>
<ul class="list-unstyled">
	<li>
		<@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-3 text-right' />
			</@cBlock>
		</@cCard>
	</li>
	<li>
		<@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>
	</li>
	<li>
		<@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-3 text-right' />
			</@cBlock >
		</@cCard>
	</li>
</ul>
<@cTitle level=4 class='mt-l'>Cartes depliantes</@cTitle>
<ul class="list-unstyled">
	<li>
		<@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-3"><@cBtn label='Text example' class='primary' /></@cText>
		</@cCard>
	</li>
	<li>
		<@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-3"><@cBtn label='Text example' class='expand' /></@cText>
		</@cCard>
	</li>
</ul>

Extrait de code HTML

<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-right">
<button class="btn btn-primary" 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-right">
<button class="btn btn-primary" 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-right">
<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>
<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-right">
<button class="btn btn-primary" 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-3 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-3 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-3 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-3 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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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-3">
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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-3">
<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')
imgClass (string) optionnal - permet d'ajouter une classe CSS à la source de l'image 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

Carte Flotante

Carte Flotante Secondary

Extrait de code Macro

<#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>

Extrait de code HTML

<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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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

@cCardLayout

Exemple

Example Group

Title example

Title example

Title example

Example Deck rowCols 4

Title example

Title example

Title example

Example Deck rowCols 3

Title example

Title example

Title example

Example Columns

Title example

Title example

Title example

Title example

Extrait de code Macro

<@cTitle level=4 class='mt-5'>Example Group</@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-right"><@cBtn label='Text example' class='primary' /></@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-right"><@cBtn label='Text example' class='primary' /></@cBlock>
        </@cCard>
    </@cCol>
</@cCardLayout>
<@cTitle level=4 class='mt-5'>Example Deck rowCols 4</@cTitle>
<@cCardLayout class="mt-0" type="deck" rowCols='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-right"><@cBtn label='Text example' class='primary' /></@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-right"><@cBtn label='Text example' class='primary' /></@cBlock>
        </@cCard>
    </@cCol>
</@cCardLayout>
<@cTitle level=4 class='mt-5'>Example Deck rowCols 3</@cTitle>
<@cCardLayout class="mt-0" type="deck" rowCols='3'>
    <@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-right"><@cBtn label='Text example' class='primary' /></@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-right"><@cBtn label='Text example' class='primary' /></@cBlock>
        </@cCard>
    </@cCol>
</@cCardLayout>
<@cTitle level=4 class='mt-5'>Example Columns</@cTitle>
<@cCardLayout class="mt-0" type="columns">
    <@cCol cols='sm-6 col-lg-4 mb-4'>
        <@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-right"><@cBtn label='Text example' class='primary' /></@cBlock>
        </@cCard>
    </@cCol>
    <@cCol cols='sm-6 col-lg-4 mb-4'>
        <@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-right"><@cBtn label='Text example' class='primary' /></@cBlock>
        </@cCard>
    </@cCol>
    <@cCol cols='sm-6 col-lg-4 mb-4'>
        <@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-4'>
	    <@cCard title='Title example' img='images/paul-dufour-5XndD3FhH-w-unsplash.png' />
    </@cCol>
    <@cCol cols='sm-6 col-lg-4 mb-4'>
        <@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-4'>
        <@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-right"><@cBtn label='Text example' class='primary' /></@cBlock>
        </@cCard>
    </@cCol>
</@cCardLayout>

Extrait de code HTML

<h4 class="mt-5">
Example Group</h4>
<div class="row g-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-right">
<button class="btn btn-primary" 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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<h4 class="mt-5">
Example Deck rowCols 4</h4>
<div class="row g-4 row-cols-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-right">
<button class="btn btn-primary" 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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<h4 class="mt-5">
Example Deck rowCols 3</h4>
<div class="row g-4 row-cols-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-right">
<button class="btn btn-primary" 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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<h4 class="mt-5">
Example Columns</h4>
<div class="row mt-0" data-masonry='{"percentPosition": true }' >
<div class="col-sm-6 col-lg-4 mb-4 ">
<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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4 ">
<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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4 ">
<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-4 ">
<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-4 ">
<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-4 ">
<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-right">
<button class="btn btn-primary" 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: 'group', valeurs possibles: 'groupe', 'deck', 'columns')
rowCols (string) optionnal - permet de spécifier le nombre de colonnes par ligne dans une disposition de type "deck"
params (string) optionnal - permet d'ajouter des parametres HTML à la grille de cartes

@cConsentTac

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.

Extrait de code Macro

<@cConsentTac title=favourite />
<#-- Tarte au Citron Service : MonParis -default- -->
<@cConsentTacService />
<#-- Tarte au Citron Service : Matomo  -->
<@cConsentTacService code='matomohightrack'>
   ${matomo!}
 </@cConsentTacService>
</@cConsentTac>

Extrait de code HTML

<link rel="stylesheet" href="themes/skin/parisfr/js/vendor/tarteaucitron/css/theme-parisfr-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",
"privacyUrl": "//www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees", /* Privacy policy url */
"hashtag": "#cookiepolicyparisfr", /* Open the panel with this hashtag */
"cookieName": "cookieparisfr", /* Cookie name */
"orientation": "bottom", /* Banner position (top - bottom) */
"showAlertSmall": false, /* Show the small banner on bottom right */
"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 */
"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 */
});
(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

Text example
Text example
Text example
Text example
Text example

Text example
Text example
Text example
Text example
Text example

Text example
Text example
Text example
Text example
Text example

Text example
Text example
Text example
Text example
Text example

Text example
content
Text example
content
Text example
content
Text example
content
Text example
content

Extrait de code Macro

<#assign lstep = [
{"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"}
]>
<@cStepper lstep />
<#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"}
]>
<@cStepper steps=lstep2 />
<@cStepper steps=lstep2 haspicto=true/>
<@cStepper steps=lstep2 title=true/>
<@cStepper steps=lstep2 showMore=true/>

Extrait de code HTML

<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" aria-hidden="true" focusable="false" role="img" aria-label="Etape Validée">
<use xlink:href="#paris-icon-check"></use>
</svg>
</div>
<p id="step-title-1" class="mt-2">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 id="step-title-2" class="mt-2">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 id="step-title-3" class="mt-2">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 id="step-title-4" class="mt-2">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 id="step-title-5" class="mt-2">Text example </p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
<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" aria-hidden="true" focusable="false" role="img" aria-label="Etape Validée">
<use xlink:href="#paris-icon-check"></use>
</svg>
</div>
<p id="step-title-1" class="mt-2">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 id="step-title-2" class="mt-2">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 id="step-title-3" class="mt-2">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 id="step-title-4" class="mt-2">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 id="step-title-5" class="mt-2">Text example </p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
<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 id="step-title-1" class="mt-2">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="2" aria-hidden="true">
<img src="images/fa-battery-1.png" class="img-fluid" title="" alt="Text example" aria-hidden="true">
</figure>
<p id="step-title-2" class="mt-2">Text example </p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
<li>
<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 id="step-title-3" class="mt-2">Text example </p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></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 id="step-title-4" class="mt-2">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 id="step-title-5" class="mt-2">Text example </p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
<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" aria-hidden="true" focusable="false" role="img" aria-label="Etape Validée">
<use xlink:href="#paris-icon-check"></use>
</svg>
</div>
<div class="stepper-title">
<h2 id="step-title-1" class="h3 text-center font-weight-bold mt-2">Text example</h2>
<p class="infostep-more"></p>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="started">
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<div class="stepper-title">
<h2 id="step-title-2" class="h3 text-center font-weight-bold mt-2">Text example</h2>
<p class="infostep-more"></p>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<div class="stepper-title">
<h2 id="step-title-3" class="h3 text-center font-weight-bold mt-2">Text example</h2>
<p class="infostep-more"></p>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="4" aria-hidden="true">
<span>4</span>
</div>
<div class="stepper-title">
<h2 id="step-title-4" class="h3 text-center font-weight-bold mt-2">Text example</h2>
<p class="infostep-more"></p>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<div class="stepper-title">
<h2 id="step-title-5" class="h3 text-center font-weight-bold mt-2">Text example</h2>
<p class="infostep-more"></p>
</div>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
<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" aria-hidden="true" focusable="false" role="img" aria-label="Etape Validée">
<use xlink:href="#paris-icon-check"></use>
</svg>
</div>
<p id="step-title-1" class="mt-2">Text example <div class="infostep-more">
<span class="extra visually-hidden">content</span>
</div>
<button type='button' class='btn btn-infostep-more main-color' aria-label="Afficher le contenu">
<svg class="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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="2" aria-hidden="true">
<span>2</span>
</div>
<p id="step-title-2" class="mt-2">Text example <div class="infostep-more">
<span class="extra visually-hidden">content</span>
</div>
<button type='button' class='btn btn-infostep-more main-color' aria-label="Afficher le contenu">
<svg class="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<p id="step-title-3" class="mt-2">Text example <div class="infostep-more">
<span class="extra visually-hidden">content</span>
</div>
<button type='button' class='btn btn-infostep-more main-color' aria-label="Afficher le contenu">
<svg class="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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 "></div>
</li>
<li>
<div class="idx" data-idx="4" aria-hidden="true">
<span>4</span>
</div>
<p id="step-title-4" class="mt-2">Text example <div class="infostep-more">
<span class="extra visually-hidden">content</span>
</div>
<button type='button' class='btn btn-infostep-more main-color' aria-label="Afficher le contenu">
<svg class="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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 "></div>
</li>
<li>
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<p id="step-title-5" class="mt-2">Text example <div class="infostep-more">
<span class="extra visually-hidden">content</span>
</div>
<button type='button' class='btn btn-infostep-more main-color' aria-label="Afficher le contenu">
<svg class="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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 "></div>
</li>
</ol>
</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.

@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.

Extrait de code Macro

<#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 />

Extrait de code HTML

<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

@cForm

Exemple

Extrait de code Macro

<@cForm>
<@cText><@cLink label='Visualiser un formulaire complet' href='jsp/site/Portal.jsp?page_id=8' /></@cText>
</@cForm>

Extrait de code HTML

<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

@cFormRow

Exemple

Une ligne de Formulaire...

Extrait de code Macro

<@cFormRow>
    <@cCol>
      <@cText><@cLink label='Visualiser un formulaire complet' href='jsp/site/Portal.jsp?page_id=8' /></@cText>
    </@cCol>
</@cFormRow>

Extrait de code HTML

<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 marco 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

Visualiser un formulaire complet

@cField

Exemple

Extrait de code Macro

<@cForm>
<@cFormRow>
    <@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>
</@cFormRow>
<@cFieldset legend='Bloc Adresse'>
<@cFormRow>
    <@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>
</@cFormRow>
<@cFormRow>
    <@cCol cols="12">
        <@cField label='Numéro et libellé de la voie' for='adresseVoie' required=true>
            <@cFormHelp id='adresseVoie' label='Commencez à saisir votre adresse pour sélectionner parmi les propositions' />
            <@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" autocomplete="street-address"'/>
        </@cField>
    </@cCol>
</@cFormRow>
<@cFormRow>
    <@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>
</@cFormRow>
<@cFormRow>
    <@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>
</@cFormRow>
<@cFormRow>
    <@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>
</@cFormRow>
</@cFieldset>
</@cForm>

Extrait de code HTML

<form method="post">
<div class="row ">
<div class="col ">
<div class="mb-xs">
<label class="" for="reduc">
Code de réduction
</label>
<input type="text" class=" form-control" name="reduc" id="reduc" value="" placeholder="Exemple: A256" aria-label="Exemple: A256" aria-describedby="help_reduc">
<p class="form-text " id="help_reduc">
Saisir un code de réduction</p>
</div>
</div>
</div>
<fieldset id="fieldset-id-18817732016111" role="group" aria-labelledby="legend-id-18817732016111"'>
<legend id="legend-id-18817732016111" >Bloc Adresse</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<div class="mb-xs">
<label class="" for="firstName">
Prénom <span class="main-danger-color" tabindex="-1">*</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="" for="lastName126">
Nom <span class="main-danger-color" tabindex="-1">*</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="" for="adresseVoie">
Numéro et libellé de la voie <span class="main-danger-color" tabindex="-1">*</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" aria-describedby="help_adresseVoie" autocomplete="street-address" required aria-required="true">
</div>
</div>
</div>
<div class="row ">
<div class="col-12 ">
<div class="mb-xs">
<label class="" 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="" 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="" for="adresseCode">
Code postal <span class="main-danger-color" tabindex="-1">*</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="" for="adresseVille">
Commune <span class="main-danger-color" tabindex="-1">*</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

@cFieldSet

Exemple

Extrait de code Macro

<@cForm>
<@cFieldset legend='Etat-civil'>
<@cFormRow>
    <@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>
</@cFormRow>
</@cFieldset>
<@cFieldset legend='Etat-civil 2' class='mt-l' showLabel=false>
<@cFormRow>
    <@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>
</@cFormRow>
</@cFieldset>
<@cFieldset legend='Etat-civil 3' class='mt-l' legendClass='is-invalide' >
<@cFormRow>
    <@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>
</@cFormRow>
</@cFieldset>
</@cForm>

Extrait de code HTML

<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="" for="firstNameF1">
Prénom <span class="main-danger-color" tabindex="-1">*</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="" for="lastNameF1">
Nom <span class="main-danger-color" tabindex="-1">*</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="" for="firstNameF2">
Prénom <span class="main-danger-color" tabindex="-1">*</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="" for="lastNameF2">
Nom <span class="main-danger-color" tabindex="-1">*</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="" for="firstNameF3">
Prénom <span class="main-danger-color" tabindex="-1">*</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="" for="lastName">
Nom <span class="main-danger-color" tabindex="-1">*</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

@cInput

Exemple

Extrait de code Macro

<@cFormRow>
    <@cCol>
        <@cLabel label='Nom' for='name' />
        <@cInput name='name' type='text' value='Dupont' helpMsg='Saisir mon nom' />
    </@cCol>
</@cFormRow>
<@cFormRow>
    <@cCol>
        <@cLabel label='Prénom' for='name2' />
        <@cInput name='name2' type='text' placeholder='Exemple: Jean Yves' helpMsg='Saisir mon prénom' />
    </@cCol>
</@cFormRow>
<@cFormRow>
    <@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>
</@cFormRow>
<@cFormRow>
    <@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>
</@cFormRow>
<@cFormRow>
    <@cCol class='4'>
        <@cInputDate id='datepicker_0' label='Date avec date picker' name='name3' value=.now?date?iso_utc />
    </@cCol>
</@cFormRow>

Extrait de code HTML

<form method="post">
<div class="row ">
<div class="col ">
<label class="" 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="" 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="" 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="" 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="" 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="" for="datepicker_0">
Date avec date picker
</label>
<div class="input-group">
<input type="text" class=" form-control" name="name3" id="datepicker_0" value="2024-12-24">
<svg class="paris-icon paris-icon-agenda" id="datepicker_0" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
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_0 = document.querySelector('#datepicker_0')
const dtOptionsdatepicker_0 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_0 = new themeParisFrDatepicker( elemdatepicker_0, dtOptionsdatepicker_0 );
});
</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

@cTextArea

Exemple

Extrait de code Macro

<@cFormRow>
    <@cCol>
        <@cLabel label='Description' for='desc' />
        <@cTextArea name='desc' helpMsg='Saisir une description' rows=15 />
    </@cCol>
</@cFormRow>

Extrait de code HTML

<form method="post">
<div class="row ">
<div class="col ">
<label class="" 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

@cLabel

Exemple

Mot de Passe

Extrait de code Macro

<@cFormRow>
  <@cCol>
      <@cLabel label='Mot de Passe' for='password1' />
      <@cInput name='password1' type='password' />
  </@cCol>
</@cFormRow>

Extrait de code HTML

<div class="row ">
<div class="col ">
<label class="" 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

@cFormHelp

Exemple

Aide

Extrait de code Macro

<@cFormHelp id='field' label='Aide' />

Extrait de code HTML

<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

@cFormError

Exemple

Prénom

Erreur

Extrait de code Macro

<@cFormRow>
    <@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>
</@cFormRow>

Extrait de code HTML

<div class="row ">
<div class="col ">
<label class="" for="formError">
Prénom
</label>
<p class="invalid-feedback" id="error_field" role="alert">
<svg class="paris-icon paris-icon-alert-error main-danger-color" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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

@cQuantityPicker

Exemple

Quantité

Information exemple

Extrait de code Macro

<@cFormRow>
    <@cCol>
        <@cLabel label='Quantité' for='quantity' />
        <@cQuantityPicker name='quantity' minQty='0' maxQty='10' helpMsg='Information exemple' />
    </@cCol>
</@cFormRow>

Extrait de code HTML

<div class="row ">
<div class="col ">
<label class="" for="quantity">
Quantité
</label>
<p class="form-text " id="help_quantity">
Information exemple</p>
<div class="quantity-picker d-flex ">
<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 ">&#8722;</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 ">&#43;</span>
</button>
</div>
</div>
<script>
document.addEventListener("click", function(ev) {
if (ev.target.matches("button")) {
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

@cInputGroup

Exemple

Extrait de code Macro

<@cForm>
<@cFormRow>
    <@cCol class='2'>
        <@cLabel label='Tarif' for='tarif' />
        <@cInputGroup>
            <@cInput name='tarif' value='15' />
            <@cInputGroupAddon addonText='&euro;' params='aria-label="Devise en euros"'/>
        </@cInputGroup>
    </@cCol>
</@cFormRow>
<@cFormRow>
    <@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>
</@cFormRow>
<@cFormRow>
    <@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>
</@cFormRow>
<@cFormRow>
    <@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>
</@cFormRow>
</@cForm>

Extrait de code HTML

<form method="post">
<div class="row ">
<div class="col 2">
<label class="" 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">
&euro;</span>
</div>
</div>
</div>
<div class="row ">
<div class="col 8">
<label class="" 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" id="Mot de Passe" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-check"></use>
</svg>
8 letters</span>
<span class="uppercase">
<svg class="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-check"></use>
</svg>
a capital letter </span>
<span class="digit">
<svg class="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-check"></use>
</svg>
a digit</span>
</p>
</div>
</div>
<div class="row ">
<div class="col 8">
<label class="" 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<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="" 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

Date picker

Date picker sans icone

Date picker HTML

Extrait de code Macro

<@cFormRow>
    <@cCol cols='3'>
        <@cLabel label='Date picker' for='datepicker' />
        <@cInputDate id='datepicker_1' label='' name='date1' value=.now?date?iso_utc />
    </@cCol>
    <@cCol cols='4'>
        <@cLabel label='Date picker sans icone' for='datepicker' />
        <@cInputDate id='datepicker_2' label='' name='date2' icon=false />
    </@cCol>
    <@cCol cols='3'>
        <@cLabel label='Date picker HTML' for='datepicker' />
        <@cInputDate id='datepicker_3' label='' name='date3' type='date' />
    </@cCol>
</@cFormRow>

Extrait de code HTML

<div class="row ">
<div class="col-3 ">
<label class="" for="datepicker">
Date picker
</label>
<label class="" for="datepicker_1">
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date1" id="datepicker_1" value="2024-12-24">
<svg class="paris-icon paris-icon-agenda" id="datepicker_1" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
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_1 = document.querySelector('#datepicker_1')
const dtOptionsdatepicker_1 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_1 = new themeParisFrDatepicker( elemdatepicker_1, dtOptionsdatepicker_1 );
});
</script>
</div>
<div class="col-4 ">
<label class="" for="datepicker">
Date picker sans icone
</label>
<label class="" for="datepicker_2">
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date2" id="datepicker_2" value="">
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
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_2 = document.querySelector('#datepicker_2')
const dtOptionsdatepicker_2 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_2 = new themeParisFrDatepicker( elemdatepicker_2, dtOptionsdatepicker_2 );
});
</script>
</div>
<div class="col-3 ">
<label class="" for="datepicker">
Date picker HTML
</label>
<label class="" for="datepicker_3">
</label>
<div class="input-group">
<input type="date" class=" form-control" name="date3" id="datepicker_3" 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-dessu

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 flatpickr

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 flatpickr
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

@cInputDropFiles

Style guide @cInputDropFiles [New window]

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

Justificatif de domicile

Upload files *

Drop your files here or Browse

Zone + liste de fichiers upload

Attention

Pas d'upload possible sur la démo

Justificatif de domicile

Upload files

Drop your files here or Browse

Mon attestation.docx 3 Ko

Justificatif.docx 60 o

<@cFormRow> <@cCol> <@cLabel label='Nom' for='name4' /> <@cInput name='name4' type='text' value='Dupont' helpMsg='Saisir votre nom' /> </@cCol> </@cFormRow> <@cFormRow> <@cCol> <@cText class="lead main-info-color my-m">Zone de drop de fichiers</@cText> </@cCol> </@cFormRow> <@cFormRow> <@cCol> <@cField label='Justificatif de domicile' for='domicile' required=false> <@cInputDropFiles name='files_domicile' formSubmitButtonName='doSaveForm'/> </@cField> </@cCol> </@cFormRow> <@cFormRow> <@cCol> <@cText class="lead main-info-color my-m">Zone + liste de fichiers upload</@cText> </@cCol> </@cFormRow> <@cFormRow> <@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> </@cFormRow> <@cFormRow> <@cCol> <@cField> <@cBtn label='Valider' class='action' id="doSaveForm"/> <@cBtn label='Annuler' class='link-action'> <@cIcon label='Annuler' class='undo' /> </@cBtn> </@cField> </@cCol> </@cFormRow>

<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-alert-warning"></use> </svg> </div> <div class="alert-text"> <p class="alert-title">Attention</p> </div> </div> <p class="alert-content"> Cette macro nécessite le plugin <a class="font-weight-bold mx-2" href="https://github.com/lutece-platform/lutece-tech-plugin-asynchronousupload"><small><strong>AsynchronousUpload</strong></small></a> pour fonctionner !  </p> </div> <script type="module"> import { themeUtils } from './themes/skin/parisfr/js/modules/theme-utils.js'; const uploadUtils = new themeUtils; const aAsyncLinksToAddRemove = [{"name":"config.min.js","pathtoremove":"js/plugins/asynchronousupload/","pathtoadd":"themes/skin/parisfr/js/plugins/asynchronousupload/"}] uploadUtils.replaceSourceLinksFromArray( aAsyncLinksToAddRemove ) </script> <script> /* Maps to manage files field errors */ var mapFileErrors = 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 class="position-absolute p-3" style="z-index:5;top:0;right:0" > <div id="liveFileToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000"> <div class="toast-header"> <strong class="mr-auto">Attention</strong> <button type="button" class="ml-2 mb-1 close" data-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="" 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="-1" title="Mandatory">*</span></label> <div id="group-domicile" class="d-flex align-items-center file-input"> <input type="file" class="form-control my-xs disabled 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="text-primary text-underline">Browse</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> <script> window.addEventListener( 'DOMContentLoaded', (event) => { const fieldName = $('#domicile'); const groupFieldName = $('#group-domicile'); const labelFieldName = $('#lbdomicile'); let hasChecked = false, countFiles=0; mapFilesNumber.set( "domicile", 0 ); const isInputFileRequired = fieldName.hasClass('is-required'); if( isInputFileRequired ){ if( countFiles > 0 ){ fieldName.attr('data-nbuploadedfiles', countFiles ); } const validateButton = document.querySelector('#doSaveForm'); validateButton.addEventListener('click', (e) => { const fileItemsList = $('#_file_deletion_domicile .files-item'); const fileUploaded = fileItemsList.length; $('.form-control:user-invalid').addClass('is-invalid'); $('.form-control:invalid').addClass('is-invalid'); const hasErrors = $(".is-invalid").length; if( fileUploaded == 0 ){ groupFieldName.addClass('is-invalid'); labelFieldName.addClass('main-danger-color'); if( groupFieldName.next().hasClass('invalid-feedback') ){ groupFieldName.next().text('Le champs est obligatoire') } else { groupFieldName.after('<div class="invalid-feedback">Le champs est obligatoire</div>') } if( hasErrors == 0 ){ e.preventDefault(); $('html, body').scrollTop( groupFieldName.offset().top - 50 ); } } else { groupFieldName.removeClass('is-invalid'); labelFieldName.removeClass('main-danger-color'); } }) } }); </script> </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-3" 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="mr-auto">Attention</strong> <button type="button" class="ml-2 mb-1 close" data-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="" 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 disabled 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="text-primary text-underline">Browse</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"> <input type="checkbox" name="_form_upload_checkbox_file_Upload_11" id="_form_upload_checkbox_file_Upload_11" tabindex="-1"> <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"> <input type="checkbox" name="_form_upload_checkbox_file_Upload_21" id="_form_upload_checkbox_file_Upload_21" tabindex="-1"> <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> <script> window.addEventListener( 'DOMContentLoaded', (event) => { const fieldName = $('#domicile2'); const groupFieldName = $('#group-domicile2'); const labelFieldName = $('#lbdomicile2'); let hasChecked = false, countFiles=0; mapFilesNumber.set( "domicile2", 0 ); const isInputFileRequired = fieldName.hasClass('is-required'); if( isInputFileRequired ){ if( countFiles > 0 ){ fieldName.attr('data-nbuploadedfiles', countFiles ); } const validateButton = document.querySelector('#doSaveForm'); validateButton.addEventListener('click', (e) => { const fileItemsList = $('#_file_deletion_domicile2 .files-item'); const fileUploaded = fileItemsList.length; $('.form-control:user-invalid').addClass('is-invalid'); $('.form-control:invalid').addClass('is-invalid'); const hasErrors = $(".is-invalid").length; if( fileUploaded == 0 ){ groupFieldName.addClass('is-invalid'); labelFieldName.addClass('main-danger-color'); if( groupFieldName.next().hasClass('invalid-feedback') ){ groupFieldName.next().text('Le champs est obligatoire') } else { groupFieldName.after('<div class="invalid-feedback">Le champs est obligatoire</div>') } if( hasErrors == 0 ){ e.preventDefault(); $('html, body').scrollTop( groupFieldName.offset().top - 50 ); } } else { groupFieldName.removeClass('is-invalid'); labelFieldName.removeClass('main-danger-color'); } }) } }); </script> </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" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-close"></use> </svg> <span class="btn-label ">Annuler</span> </button> </div> </div> </div> <script> // Demo only $( document ).on('click', '.deleteSingleFile', function(event) { event.preventDefault(); const currInput = $('#domicile2'); let nbInputFiles = currInput.attr('data-nbuploadedfiles') <span class="badge bg-warning">optionnal</span> - 1 currInput.attr('data-nbuploadedfiles', nbInputFiles ) event.preventDefault( ); event.currentTarget.closest('.files-item').setAttribute('hidden','hidden'); }); $( document ).on('click', '#domicile', function(event) { event.preventDefault(); $('#liveFileToast').toast('show') const hiddenFiles = document.querySelectorAll('[hidden]'); hiddenFiles.forEach( (hf) => { hf.removeAttribute('hidden'); return; }) }); $( document ).on('click', '#domicile2', function(event) { event.preventDefault(); $('#liveFileToast2').toast('show') const hiddenFiles = document.querySelectorAll('[hidden]'); hiddenFiles.forEach( (hf) => { hf.removeAttribute('hidden'); return; }) }); </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.

@cRadio

Style guide @cRadio [New window]

Exemple

Yes or No ?
Radio Help

Yes

No

Disabled

Yes or No Invalid ?
Radio Help

Yes

No

Une erreur s'est produite !

Ok or Nok ?
Radio Ok Nok Help

Ok

Nok

Quel est votre choix ?
Radio Help

Choix numéro 1

Sous-titre d'explication

Nom
Saisir mon nom

Prénom
Saisir mon prénom

Choix numéro 2

Sous-titre d'explication

Nom
Saisir mon nom

Prénom
Saisir mon prénom

<@cForm> <@cFormRow> <@cCol> <@cField label='Yes or No ?' params='role="radiogroup" aria-describedby="help_radioHelp"'>  <@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> </@cFormRow> <@cFormRow> <@cCol> <@cField label='Yes or No Invalid ?' params='role="radiogroup" aria-describedby="help_radioHelp2"'>  <@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> </@cFormRow> <@cFormRow> <@cCol>  <@cFormRow> <@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> </@cFormRow> </@cCol> </@cFormRow> <@cFormRow> <@cCol> <@cField label='Quel est votre choix ?' params='role="radiogroup" aria-describedby="help_radioHelpSelection"'> <@cFormHelp id='radioHelpSelection' label='Radio Help' class='mb-m' />  <@cRadio name='selectionRadio' label='Choix numéro 1' value='1' selectionButton=true selectionLabel='Sous-titre d'explication' > <@cFormRow> <@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> </@cFormRow> </@cRadio> <@cRadio name='selectionRadio' label='Choix numéro 2' value='2' selectionButton=true selectionLabel='Sous-titre d'explication' > <@cFormRow> <@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> </@cFormRow> </@cRadio> </@cField> </@cCol> </@cFormRow> </@cForm>

<form method="post"> <div class="row "> <div class="col "> <div class="mb-xs" role="radiogroup" aria-describedby="help_radioHelp"> <label class=""> Yes or No ? </label>  <p class="form-text mb-m" id="help_radioHelp"> Radio Help</p> <div class="form-check"> <input type="radio" id="rRadio-29260928064441" name="rRadio" class="form-check-input" value="1"> <label class="form-check-label" for="rRadio-29260928064441">Yes </label> </div> <div class="form-check"> <input type="radio" id="rRadio-31310172069811" name="rRadio" class="form-check-input" value="2"> <label class="form-check-label" for="rRadio-31310172069811">No </label> </div> <div class="form-check"> <input type="radio" id="rRadio-33359416075181" name="rRadio" class="form-check-input" value="3" disabled> <label class="form-check-label" for="rRadio-33359416075181">Disabled </label> </div> </div> </div> </div> <div class="row "> <div class="col "> <div class="mb-xs" role="radiogroup" aria-describedby="help_radioHelp2"> <label class=""> Yes or No Invalid ? </label>  <p class="form-text mb-m" id="help_radioHelp2"> Radio Help</p> <div class="form-check"> <input type="radio" id="rRadio-35408660080551" name="rRadio" class="form-check-input" value="1"> <label class="form-check-label" for="rRadio-35408660080551">Yes </label> </div> <div class="form-check is-invalid"> <input type="radio" id="rRadio-37457904085921" name="rRadio" class="form-check-input" value="4"> <label class="form-check-label" for="rRadio-37457904085921">No </label> </div> <p class="invalid-feedback" id="error_rRadio" role="alert"> <svg class="paris-icon paris-icon-alert-error main-danger-color" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-alert-error"></use> </svg> Une erreur s'est produite !</p> </div> </div> </div> <div class="row "> <div class="col ">  <div class="row "> <div class="col "> <fieldset id="fieldset-id-39507148091291" role="radiogroup" aria-describedby="help_radioHelp3" role="group" aria-labelledby="legend-id-39507148091291"'> <legend id="legend-id-39507148091291" >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-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-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=""> Quel est votre choix ? </label> <p class="form-text mb-m" id="help_radioHelpSelection"> Radio Help</p>  <div class="form-check btn-selection"> <div class="selection-check"> <input type="radio" id="selectionRadio-41556392096661" name="selectionRadio" class="form-check-input" value="1"> <label class="form-check-label" for="selectionRadio-41556392096661">Choix numéro 1 </label> </div> <p class="selection-subtitle ms-m my-sm">Sous-titre d'explication</p> <div class="selection-content"> <div class="row "> <div class="col "> <label class="" 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="" 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-43605636102031" name="selectionRadio" class="form-check-input" value="2"> <label class="form-check-label" for="selectionRadio-43605636102031">Choix numéro 2 </label> </div> <p class="selection-subtitle ms-m my-sm">Sous-titre d'explication</p> <div class="selection-content"> <div class="row "> <div class="col "> <label class="" 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="" 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)

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

Documentation Formulaires Bootstrap 4

@cCheckbox

Style guide @cCheckbox [New window]

Exemple

Horaire
Choisir un horaire

Football

Natation

Tennis (Disabled)

Horaire
Choisir un horaire

Judo

Football

Erreur dans le sport !

Quel choix ?
Faites votre choix

Football

Sport avec un ballon.

Judo

Sport de combat.

Natation

Sport dans l'eau.

Tennis

Sport de raquette.

<@cFormRow> <@cCol params='aria-describedby="radioHelp"'> <@cField label='Yes or No ?' > <@cFormHelp id='radioHelp' label='Aide sur le bloc checkbox' /> <@cCheckbox name='sport' id='football' label='Football' value='foot' /> <@cCheckbox name='sport' id='judo' label='Judo' value='judo' /> <@cCheckbox name='sport' id='natation' label='Natation' value='nata' /> <@cCheckbox name='sport' id='tennis' label='Tennis' value='tenn' /> </@cField> </@cCol> </@cFormRow> <@cFormRow> <@cCol params='aria-describedby="selectHelp"'> <@cField label='Quel choix ?'> <@cFormHelp id='selectHelp' label='Faites votre choix' /> <@cCheckbox name='selectCheckbox' id='football' label='Football' value='foot' selectionButton=true selectionLabel='Sport avec un ballon.' /> <@cCheckbox name='selectCheckbox' id='judo' label='Judo' value='judo' selectionButton=true selectionLabel='Sport de combat.' /> <@cCheckbox name='selectCheckbox' id='natation' label='Natation' value='nata' selectionButton=true selectionLabel='Sport dans l'eau.' /> <@cCheckbox name='selectCheckbox' id='tennis' label='Tennis' value='tenn' selectionButton=true selectionLabel='Sport de raquette.' /> </@cField> </@cCol> </@cFormRow>

<form method="post"> <div class="row "> <div class="col " aria-describedby="radioHelp2"> <div class="mb-xs"> <label class=""> Horaire </label> <p class="form-text " id="help_radioHelp2"> Choisir un horaire</p> <div class="form-check"> <input type="checkbox" id="football" name="sport" class="form-check-input" value="foot"> <label class="form-check-label" for="football">Football </label> </div> <div class="form-check"> <input type="checkbox" id="natation" name="sport" class="form-check-input" value="nata"> <label class="form-check-label" for="natation">Natation </label> </div> <div class="form-check"> <input type="checkbox" id="tennis" name="sport" class="form-check-input" value="tenn" disabled> <label class="form-check-label" for="tennis">Tennis (Disabled) </label> </div> </div> </div> </div> <div class="row "> <div class="col " aria-describedby="radioHelp2"> <div class="mb-xs"> <label class=""> Horaire </label> <p class="form-text " id="help_radioHelp2"> Choisir un horaire</p> <div class="form-check"> <input type="checkbox" id="judo" name="sport" class="form-check-input" value="judo"> <label class="form-check-label" for="judo">Judo </label> </div> <div class="form-check is-invalid"> <input type="checkbox" id="football" name="sport" class="form-check-input" value="foot"> <label class="form-check-label" for="football">Football </label> </div> <p class="invalid-feedback" id="error_football" role="alert"> <svg class="paris-icon paris-icon-alert-error main-danger-color" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-alert-error"></use> </svg> Erreur dans le sport !</p> </div> </div> </div> <div class="row "> <div class="col " aria-describedby="selectHelp"> <div class="mb-xs"> <label class=""> 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-check-label" for="selectFootball">Football </label> </div> <p class="selection-subtitle ms-m my-sm">Sport avec un ballon.</p> </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-check-label" for="selectJudo">Judo </label> </div> <p class="selection-subtitle ms-m my-sm">Sport de combat.</p> </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-check-label" for="selectNatation">Natation </label> </div> <p class="selection-subtitle ms-m my-sm">Sport dans l'eau.</p> </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-check-label" for="selectTennis">Tennis </label> </div> <p class="selection-subtitle ms-m my-sm">Sport de raquette.</p> </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é 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)

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

Documentation Formulaires Bootstrap 4

@cSelect

Style guide @cSelect [New window]

Exemple

Commune
Aide Combo Box

Commune

Catégories
Aide OptGroup

<@cFormRow> <@cCol params='aria-describedby="cSelect"'> <@cField label='Commune'> <@cSelect name='commune' multiple=true helpMsg='Aide Combo Box' id='c-select-1'> <@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'/> </@cSelect> </@cField> </@cCol> </@cFormRow> <@cFormRow class='mt-3'> <@cCol> <@cField label='Commune'> <@cSelect name=''> <@cOption label='' value='0' /> <@cOption label='Paris (75000)' value='1' /> <@cOption label='Parigné-l'Eveque (72250)' value='2' selected=true /> <@cOption label='Parigné (35133)' value='3' /> <@cOption label='Parigné-le-Polin (72330)' value='4' /> </@cSelect> </@cField> </@cCol> </@cFormRow> <@cFormRow class='mt-3'> <@cCol> <@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> </@cField> </@cCol> </@cFormRow>

<div class="row "> <div class="col " aria-describedby="cSelect"> <div class="mb-xs"> <label class=""> Commune </label> <p class="form-text " id="help_commune"> Aide Combo Box</p> <select name="commune" class="form-select" multiple aria-describedby="help_commune"> <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> </select> </div> </div> </div> <div class="row mt-3"> <div class="col "> <div class="mb-xs"> <label class=""> Commune </label> <select name="" class="form-select"> <option value="0"></option> <option value="1">Paris (75000)</option> <option value="2" selected>Parigné-l Eveque (72250)</option> <option value="3">Parigné (35133)</option> <option value="4">Parigné-le-Polin (72330)</option> </select> </div> </div> </div> <div class="row mt-3"> <div class="col " aria-describedby="cOptGroup"> <div class="mb-xs"> <label class=""> Catégories </label> <select name="" class="form-select"> <option value="0"></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

Documentation Formulaires Bootstrap 4

@cMultiselect

Style guide @cMultiselect [New window]

Exemple

Example

Option 1

Option 2

Option 3

Option 4

Example disabled

Option 1

Option 2

Option 3

Option 4

<@cFormRow> <@cCol> <@cField label='Example'> <@cMultiselect id='Example 1'> <@cMultiselectOption name='multiSelectExample' id='option 1' label='Option 1' value='option1'/> <@cMultiselectOption name='multiSelectExample' id='option 2' label='Option 2' value='option2'/> <@cMultiselectOption name='multiSelectExample' id='option 3' label='Option 3' value='option3'/> <@cMultiselectOption name='multiSelectExample' id='option 4' label='Option 4' value='option4' disabled=true/> </@cMultiselect> </@cField> <@cField label='Example disabled'> <@cMultiselect id='Example 2' disabled=true> <@cMultiselectOption name='multiSelectExample' id='option 1' label='Option 1' value='option1'/> <@cMultiselectOption name='multiSelectExample' id='option 2' label='Option 2' value='option2'/> <@cMultiselectOption name='multiSelectExample' id='option 3' label='Option 3' value='option3'/> <@cMultiselectOption name='multiSelectExample' id='option 4' label='Option 4' value='option4' disabled=true/> </@cMultiselect> </@cField> </@cCol> </@cFormRow>

<div class="row "> <div class="col "> <div class="mb-xs"> <label class=""> Example </label> <div class='multiselect'> <div class="tags-container" id="tagsContainer"></div> <div class="dropdown"> <button class="form-select " type="button" id='Example 1' data-bs-toggle="dropdown" aria-expanded="false" params=> Sélectionner des options </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li class=""> <div class=" "> <input type="checkbox" id="option 1" name="multiSelectExample" class="form-check-input" value="option1"> <label class="form-check-label" for="option 1">Option 1 </label> </div> </li> <li class=""> <div class=" "> <input type="checkbox" id="option 2" name="multiSelectExample" class="form-check-input" value="option2"> <label class="form-check-label" for="option 2">Option 2 </label> </div> </li> <li class=""> <div class=" "> <input type="checkbox" id="option 3" name="multiSelectExample" class="form-check-input" value="option3"> <label class="form-check-label" for="option 3">Option 3 </label> </div> </li> <li class=""> <div class=" "> <input type="checkbox" id="option 4" name="multiSelectExample" class="form-check-input" value="option4" disabled> <label class="form-check-label" for="option 4">Option 4 </label> </div> </li> </ul> </div> </div> </div> <div class="mt-3"> <label class=""> Example disabled </label> <div class='multiselect'> <div class="tags-container" id="tagsContainer"></div> <div class="dropdown"> <button class="form-select disabled" type="button" id='Example 2' data-bs-toggle="dropdown" aria-expanded="false" params=> Sélectionner des options </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li class=""> <div class=" "> <input type="checkbox" id="option 1" name="multiSelectExample" class="form-check-input" value="option1"> <label class="form-check-label" for="option 1">Option 1 </label> </div> </li> <li class=""> <div class=" "> <input type="checkbox" id="option 2" name="multiSelectExample" class="form-check-input" value="option2"> <label class="form-check-label" for="option 2">Option 2 </label> </div> </li> <li class=""> <div class=" "> <input type="checkbox" id="option 3" name="multiSelectExample" class="form-check-input" value="option3"> <label class="form-check-label" for="option 3">Option 3 </label> </div> </li> <li class=""> <div class=" "> <input type="checkbox" id="option 4" name="multiSelectExample" class="form-check-input" value="option4" disabled> <label class="form-check-label" for="option 4">Option 4 </label> </div> </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'

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

@cStepDone

Style guide @cStepDone [New window]

Exemple

Accueil

Ce questionnaire est personnel

Votre nom Marcel

<@cStepDone step='1' title='Accueil' idx=1 > <@cFormRow> <@cCol> Ce questionnaire est personnel </@cCol> </@cFormRow> <@cFormRow> <@cCol> <@cLabel label='Votre nom ' /> </@cCol> <@cCol> Marcel </@cCol> </@cFormRow> <@cStepDone>

<section class="step step-done "> <section class="step-title"> <div class="container d-flex justify-content-between"> <h2 class="title"> <span class="step-number"> <svg width="32" height="32" 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"> <div class="row "> <div class="col "> Ce questionnaire est personnel </div> </div> <div class="row "> <div class="col "> <label class=""> Votre nom </label> Marcel </div> </div> <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.

actionHref='' actionClass='' class='' id='' params=''>

@cStepCurrent

Style guide @cStepCurrent [New window]

Exemple

2 Dossier

Fields followed by an asterisk * are mandatory.

Nom (Nom de famille)
Saisir votre nom de famille

Prénom

Conserver ces données

Oui

Non

Fields followed by an asterisk * are mandatory.

<@cStepCurrent step='1' title='Dossier'> <@cFormRow> <@cCol> <@cField label='Nom' for='name5' labelData='<small class="text-muted">(Nom de famille)</small>'> <@cInput name='name5' placeholder='Exemple: Durand' /> <@cFormHelp id='name5' label='Saisir votre nom de famille' /> </@cField> </@cCol> <@cCol> <@cField label='Prénom' for='firstname-current'> <@cInput name='firstname-current' required=false /> </@cField> </@cCol> </@cFormRow> <@cFormRow> <@cCol params='aria-describedby="mydata"'> <@cField> <@cLabel label='Conserver ces données' for='mydata' /> <@cFormRow> <@cCol> <@cRadio name='mydata' id='md2' label='Oui' value='1' inline=true /> <@cRadio name='mydata' id='md1' label='Non' value='2' inline=true /> </@cCol> </@cFormRow> </@cField> </@cCol> </@cFormRow> <@cStepCurrent>

<section class="step step-current " id="current_step"> <section class="step-title"> <div class="container"> <h2 class="title" data-step="2" title="Dossier - " aria-current="step"> <span class="step-number"> 2</span> <span> Dossier</span> </h2> </div> </section> <div class="container"> <section class="step-content"> <div class="row "> <div class="col visually-hidden"> <p class="mandatory-warning"> Fields followed by an asterisk * are mandatory.</p> </div> </div> <div class="row "> <div class="col "> <div class="mb-xs"> <label class="" 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"> <p class="form-text " id="help_fname"> Saisir votre nom de famille</p> </div> </div> <div class="col "> <div class="mb-xs"> <label class="" for="firstname-step"> Prénom </label> <input type="text" class=" form-control" name="firstname-step" id="firstname-step" value=""> </div> </div> </div> <div class="row "> <div class="col " aria-describedby="mydata"> <div class="mb-xs"> <label class="" 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-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-check-label" for="md1">Non </label> </div> </div> </div> </div> </div> </div> <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-end mb-l"> <button class="btn btn-primary btn-action ms-sm order-5" type="submit" id="valid" name="valid"> <span class="btn-label ">Previous step</span> </button> </div> </div> </section> </div> </section> <script> window.addEventListener('DOMContentLoaded', (event) => { const current = document.querySelector('#current_step'); const y = current.offsetTop - 180; window.scrollBy(0, y); 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') 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.`; invalid.after( pInvalid ); } }); }) }); </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.

@cStepNext

Style guide @cStepNext [New window]

Exemple

3 Localisation

<@cStepNext step='3' title='Localisation' />

<section class="step step-next"> <section class="step-title"> <div class="container"> <h2 class="title" 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

@cStepGroup

Style guide @cStepGroup [New window]

Exemple

Contenu d'une étape : Avec bulle d'aide

2 Dossier

Fields followed by an asterisk * are mandatory.

Information

Lorem ipsum Help

Nom (Nom de famille)
Saisir votre nom de famille

Prénom

Contenu d'une étape avec au moins une itération

Information avec Itération (2)

Nom (Nom de famille)
Saisir votre nom de famille

Prénom

Fields followed by an asterisk * are mandatory.

<@cStepGroup title='Information' help=''> <@cFormRow> <@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> </@cFormRow> </@cStepGroup> <@cStepGroup title='Information' iterate=true iteration=1> <@cFormRow> <@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> </@cFormRow> </@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"> <h2 class="title" data-step="2" title="Dossier - " aria-current="step"> <span class="step-number"> 2</span> <span> Dossier</span> </h2> </div> </section> <div class="container"> <section class="step-content"> <div class="row "> <div class="col visually-hidden"> <p class="mandatory-warning"> Fields followed by an asterisk * are mandatory.</p> </div> </div> <div class="row "> <section class="w-100 flex-fill step-group "> <div class="container"> <div class="row "> <div class="col-12 px-3 "> <h2 class="title"> Information </h2> </div> </div> <div class="row "> <div class="col "> <div class="accordion" id="acc0" role="status" > <div class="card outline my-l" > <div class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAcc0" aria-expanded="true" aria-controls="collapseAcc0"> <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="#collapseAcc0" aria-expanded="true" aria-controls="collapseAcc0" aria-labelledby="headingAcc0"> <span class="d-flex align-items-center flex-1"> <span class="card-header-prepend"> <svg class="paris-icon paris-icon-alert-info" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-alert-info"></use> </svg> </span> <span id="headingAcc0">Help on Information.</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"></span> <span class="btn-accordion"> <svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-arrow-bottom"></use> </svg> </span> </span> </button> </div> <div id="collapseAcc0" class="m-0 collapse show" role="region" aria-labelledby="headingAcc0" data-parent="#acc0"> <div class="card-body"> Lorem ipsum Help </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="#collapseAcc0" aria-expanded="true" aria-controls="collapseAcc0"> <svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false"> <use xlink:href="#paris-icon-arrow-bottom"></use> </svg> </button> </div> </div> </div> </div> </div> <div class="row "> <div class="col "> <div class="mb-xs"> <label class="" 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="" for="firstname"> Prénom </label> <input type="text" class=" form-control" name="firstname" id="firstname" value=""> </div> </div> </div> </div> </section> </div> <hr> <p class="lead"> Contenu d'une étape avec au moins une itération</p> <div class="row "> <section class="w-100 flex-fill step-group "> <div class="container"> <div class="row "> <div class="col-12 px-3 d-flex justify-content-between"> <h2 class="title"> Information avec Itération (2)</h2> <div class="text-right"> <button class="btn btn-danger btn-mini ms-m" type="submit"name="action_removeIteration" value="rm_1"> <svg class="paris-icon paris-icon-trash" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-trash"></use> </svg> <span class="btn-label"> Delete</span> </button> </div> </div> </div> <div class="row "> <div class="col "> <div class="mb-xs"> <label class="" 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="" for="firstname-2"> Prénom </label> <input type="text" class=" form-control" name="firstname-2" id="firstname-2" value=""> </div> </div> </div> <div class="row "> <div class="col px-4 px-sm-5 d-flex justify-content-end"> <button class="btn btn-mini ms-m" type="submit"name="action_addIteration" value="add_1"> <svg class="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-plus"></use> </svg> <span class="btn-label"> Add</span> </button> </div> </div> </div> </section> </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-end mb-l"> <button class="btn btn-primary btn-action ms-sm order-5" type="submit" id="valid" name="valid"> <span class="btn-label ">Previous step</span> </button> </div> </div> </section> </div> </section> <script> window.addEventListener('DOMContentLoaded', (event) => { const current = document.querySelector('#current_step'); const y = current.offsetTop - 180; window.scrollBy(0, y); 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') 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.`; invalid.after( pInvalid ); } }); }) }); </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.

France Connect

Style guide France Connect [New window]

Exemple

Quoi de plus... More informations on FranceConnect's website

<@cText> <@fcBtnImg /> </@cText> <@cText> <@fcImg label='Quid' /> </@cText> <@cCard> <@fcMessage>Quoi de plus...</@fcMessage> </@cCard>

<p> <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> </p> <p> <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> </p> <div class="card "> <div class="card-body"> <p> <span class="d-block"> Quoi de plus...</span> <a href="https://franceconnect.gouv.fr/" title="More informations on FranceConnect's website [New window]" 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.

Documentation France Connect

@cLink

Style guide @cLink [New window]

Exemple

Link primary

Link primary

Link secondary

Link secondary

Decouvrir Paris.fr

Decouvrir Paris.fr

OW2

<@cText> <@cLink href='http://paris.fr' label='Link primary' target='_blank' class='btn btn-primary' title='Site de la Ville de Paris' /> </@cText> <@cText> <@cLink href='http://paris.fr' label='Link primary' target='_blank' class='btn btn-primary disabled' title='Site de la Ville de Paris' /> </@cText> <@cText> <@cLink href='http://fr.lutece.paris.fr' label='Link secondary' target='_blank' class='link-secondary' /> </@cText> <@cText> <@cLink href='http://fr.lutece.paris.fr' label='Link secondary' target='_blank' class='link-secondary disabled' /> </@cText> <@cText> <@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> </@cText> <@cText> <@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> </@cText> <@cText> <@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' /> </@cText>

<p> <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> </p> <p> <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> </p> <p> <a href="http://fr.lutece.paris.fr" class="link-secondary" target="_blank" > <span class="link-label">Link secondary</span> </a> </p> <p> <a href="http://fr.lutece.paris.fr" class="link-secondary disabled" target="_blank" > <span class="link-label">Link secondary</span> </a> </p> <p> <a href="http://paris.fr" class="link-secondary" title="Site de la Ville de Paris" > <svg class="paris-icon paris-icon-like" arialabelledby="paris-icon-like-paris-title" focusable="false" role="img" aria-hidden="true"> <title id="paris-icon-like-paris-title">information</title> <use xlink:href="#paris-icon-like"></use> </svg> <span class="link-label">Decouvrir Paris.fr</span> </a> </p> <p> <a href="http://paris.fr" class="btn btn-action" title="Site de la Ville de Paris" > <svg class="paris-icon paris-icon-check" arialabelledby="paris-icon-check-paris-title" focusable="false" role="img" aria-hidden="true"> <title id="paris-icon-check-paris-title">information</title> <use xlink:href="#paris-icon-check"></use> </svg> <span class="link-label">Decouvrir Paris.fr</span> </a> </p> <p> <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> </p>

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

@cList

Style guide @cList [New window]

Exemple

Liste de liens

Page de Paris.fr dédiée aux régles d'urbanisme

Consultation du PLU

Decouvrir Paris.fr

Page de Paris.fr dédiée aux régles d'urbanisme

Consultation du PLU

Decouvrir Paris.fr

Liste de fichiers

Régles d'urbanisme.pdf
80ko

PLU.docx
80ko

Régles d'urbanisme.pdf
80ko

PLU.docx
80ko

Liste de liens

Tout sur le théme

Tout sur Lutéce

Tout sur ma mére

Tout sur le théme

Tout sur Lutéce

Tout sur ma mére

Show more

<#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> <#-- <span class="badge bg-warning">optionnal</span> --> <@chItem><strong> <@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'> <#-- <span class="badge bg-warning">optionnal</span> --> <@chItem><strong> <@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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" href="https://www.paris.fr/municipalite" title="Consultation du PLU" target="_blank"> <span>Consultation du PLU </span> </a> </li> <li> <strong> <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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" href="https://www.paris.fr/municipalite" title="Consultation du PLU" target="_blank"> <span>Consultation du PLU </span> </a> </li> <li> <strong> <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="d-flex justify-content-between align-items-center" 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>80ko</small> <svg class="paris-icon paris-icon-file-text ms-m main-color" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-file-text"></use> </svg> </div> </a> </li> <li class="custom-list-item "> <a class="d-flex justify-content-between align-items-center" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx"> <span>PLU.docx </span> <div class="files-info"> <small>80ko</small> <svg class="paris-icon paris-icon-file-text ms-m main-color" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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="d-flex justify-content-between align-items-center" 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>80ko</small> <svg class="paris-icon paris-icon-file-text ms-m main-color" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-file-text"></use> </svg> </div> </a> </li> <li class="custom-list-item "> <a class="d-flex justify-content-between align-items-center" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx"> <span>PLU.docx </span> <div class="files-info"> <small>80ko</small> <svg class="paris-icon paris-icon-file-text ms-m main-color" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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.. */ }

@cErrorMessage

Style guide @cErrorMessage [New window]

Exemple

Erreur Enorme

Grossière erreur tout est à revoir

Home On y va !

<@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" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-alert-danger"></use> </svg> </div> <div class="alert-text"> <p class="alert-title">Erreur Enorme</p> </div> </div> <p class="alert-content"> <p> Grossière erreur tout est à revoir</p> </p> </div> <p class="text-center mt-l"> <a href="." class="btn btn-secondary" > <span class="link-label">Home</span> </a> <a href="." class="btn btn-primary" > <span class="link-label">On y va !</span> </a> </p> </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

@cFilter

Style guide @cFilter [New window]

Exemple

44 résultats

Liste de filtres

Filter 1

Filter 2

Filter 3

<#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" arialabelledby="paris-icon-filter-paris-title" focusable="false" role="img" aria-hidden="true"> <title id="paris-icon-filter-paris-title">Filter</title> <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-43904124112771" role="group" aria-labelledby="legend-id-43904124112771"'> <legend class="visually-hidden" id="legend-id-43904124112771" >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-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-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-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

@cTabs

Style guide @cTabs [New window]

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

Style guide @cPagination [New window]

Exemple

1 - active

2

...

<@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" id="Précédent" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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" id="Suivant" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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.

Popover

Style guide Popover [New window] Doc Bootstrap Popover [New window]

Exemple

Popover sur bouton

Popover sur bouton désactivé

Popover avec titre

<@cTitle level=4 class='mt-l'>Popover sur bouton</@cTitle> <@cBtn label='Popover top custom' class='secondary m-1' params="data-bs-container='body' data-bs-toggle='popover' data-bs-placement='top' data-bs-content='Top popover' data-bs-custom-class='custom-popover'" /> <@cBtn label='Popover right custom' class='secondary m-1' params="data-bs-container='body' data-bs-toggle='popover' data-bs-placement='right' data-bs-content='Right popover' data-bs-custom-class='custom-popover'" /> <@cBtn label='Popover bottom custom' class='secondary m-1' params="data-bs-container='body' data-bs-toggle='popover' data-bs-placement='bottom' data-bs-content='Bottom popover' data-bs-custom-class='custom-popover'" /> <@cBtn label='Popover left custom' class='secondary m-1' params="data-bs-container='body' data-bs-toggle='popover' data-bs-placement='left' data-bs-content='Left popover' data-bs-custom-class='custom-popover'" /> <@cTitle level=4 class='mt-l'>Tooltip sur bouton désactivé</@cTitle> <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover" data-bs-custom-class='custom-tooltip'> <@cBtn label='Tooltip top custom' class='primary m-1' disabled=true /> </span>

<h4 class="mt-l"> Popover sur bouton</h4> <button class="btn btn-primary m-1" type="submit"data-bs-container='body' data-bs-toggle='popover' data-bs-placement='top' data-bs-content='Top popover' data-bs-custom-class='custom-popover'> <span class="btn-label ">Popover top custom</span> </button> <button class="btn btn-primary m-1" type="submit"data-bs-container='body' data-bs-toggle='popover' data-bs-placement='right' data-bs-content='Right popover' data-bs-custom-class='custom-popover'> <span class="btn-label ">Popover right custom</span> </button> <button class="btn btn-primary m-1" type="submit"data-bs-container='body' data-bs-toggle='popover' data-bs-placement='bottom' data-bs-content='Bottom popover' data-bs-custom-class='custom-popover'> <span class="btn-label ">Popover bottom custom</span> </button> <button class="btn btn-primary m-1" type="submit"data-bs-container='body' data-bs-toggle='popover' data-bs-placement='left' data-bs-content='Left popover' data-bs-custom-class='custom-popover'> <span class="btn-label ">Popover left custom</span> </button> <h4 class="mt-l"> Popover sur bouton désactivé</h4> <span class="d-inline-block mt-0" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover" data-bs-custom-class='custom-popover'> <button class="btn btn-primary m-1" type="submit" disabled> <span class="btn-label ">Popover bouton désactivé</span> </button> </span> <h4 class="mt-l"> Popover avec titre</h4> <button class="btn btn-primary m-1" type="submit"data-bs-container='body' data-bs-toggle='popover' data-bs-placement='top' data-bs-title='Titre du popover' data-bs-content='Voici un popover avec un long texte à l'intérieur, ce qui peut être utile lorsque l'on veut partager beaucoup d'informations à l'utilisateur.' data-bs-custom-class='custom-popover'> <span class="btn-label ">Popover avec titre</span> </button>

Paramètres

Les paramètres cPopover

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 la class du popover

data-bs-title (string) optionnal - définit le titre du popover

data-bs-content (string) required - définit le contenu du popover

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 Bootstrap

Scrollspy

Style guide Scrollspy [New window]

Exemple

Item 1

Item 2

Item 3

Item 4

Item 5

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":"#anchor-list-item-1"}, {"label":"Item 2", "href":"#anchor-list-item-2"}, {"label":"Item 3", "href":"#anchor-list-item-3"}, {"label":"Item 4", "href":"#anchor-list-item-4"}, {"label":"Item 5", "href":"#anchor-list-item-5"} ]> <@cRow> <@cCol cols="3"> <@cAnchor anchors=anchors id="scrollspy-list-example"/> </@cCol> <@cCol> <div data-bs-spy="scroll" data-bs-target="#scrollspy-list-example" tabindex="0"> <@cTitle level=4 id="anchor-list-item-1" 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-3">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-3">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-3">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-3">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> </div> </@cCol> </@cRow>

<div class="row "> <div class="col-3 "> <div id="scrollspy-list-example" class="anchors "> <ul > <li> <a href="#anchor-list-item-1" > <span class="link-label">Item 1</span> </a> </li> <li> <a href="#anchor-list-item-2" > <span class="link-label">Item 2</span> </a> </li> <li> <a href="#anchor-list-item-3" > <span class="link-label">Item 3</span> </a> </li> <li> <a href="#anchor-list-item-4" > <span class="link-label">Item 4</span> </a> </li> <li> <a href="#anchor-list-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" class="scrollspy-example"> <h4 class="mt-0" id="anchor-list-item-1"> 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-3" 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-3" 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-3" 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-3" 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> </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

@cSlider

Style guide @cSlider [New window]

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":"https://picsum.photos/seed/picsum/300/300", "link":"https://paris.fr"}, {"content":"Content 2", "linkLabel":"Title 2", "img":"https://picsum.photos/seed/picsum/300/300", "link":"https://paris.fr"}, {"content":"Content 3", "linkLabel":"Title 3", "img":"https://picsum.photos/seed/picsum/300/300", "link":"https://paris.fr"}, {"content":"Content 4", "linkLabel":"Title 4", "img":"https://picsum.photos/seed/picsum/300/300", "link":"https://paris.fr"}, {"content":"Content 5", "linkLabel":"Title 5", "img":"https://picsum.photos/seed/picsum/300/300", "link":"https://paris.fr"}, {"content":"Content 6", "linkLabel":"Title 6", "img":"https://picsum.photos/seed/picsum/300/300", "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="https://picsum.photos/seed/picsum/300/300" 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="https://picsum.photos/seed/picsum/300/300" 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="https://picsum.photos/seed/picsum/300/300" 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="https://picsum.photos/seed/picsum/300/300" 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="https://picsum.photos/seed/picsum/300/300" 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="https://picsum.photos/seed/picsum/300/300" 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" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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

@cStatus

Style guide @cStatus [New window]

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">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">To be completed</span> </div> <div class="status inprogress"> <span class="status-label">In progress</span> </div> <div class="status over"> <span class="status-label">Over</span> </div> <div class="status bygone"> <span class="status-label">Bygone</span> </div> <div class="status bygone"> <span class="status-label">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

@cTable

Style guide @cTable [New window] Doc Bootstrap @cTable [New window]

Exemple

Tableau avec thème

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

<@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> <@cTableResponsive id='table1' />

<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" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <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).ready(function() { var tableId = "table1"; $('table#' + tableId + ' tbody tr').each(function(index) { var $cells = $(this).find('td'); var accordionContent = ''; $cells.each(function(i) { var headerText = $('table#' + tableId + ' thead th').eq(i).text(); var cellText = $(this).text(); accordionContent += `<p>` + headerText + `</p><p class='mb-4'><strong>` + cellText + `</strong></p>`; }); var accordionItem = ` <div class="accordion" id="accheading` + tableId + index + `" > <div class="card " class='m-0'> <div class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccheading` + tableId + index + `" aria-expanded="false" aria-controls="collapseAccheading` + tableId + 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="#collapseAccheading` + tableId + index + `" aria-expanded="false" aria-controls="collapseAccheading` + tableId + index + `" aria-labelledby="headingAccheading` + tableId + index + `"> <span class="d-flex flex-column flex-1"> <span class="card-title d-block" id="headingAccheading` + tableId + index + `">` + $cells.eq(0).text() + `</span> </span> <span class="accordion-toggle ms-auto"> <span class="btn-label-accordion d-none d-md-inline-block"></span> <span class="btn-accordion btn-outline-action"> <svg class="paris-icon paris-icon-arrow-bottom btn-outline-action" aria-hidden="true" focusable="false" role="img" aria-hidden="true"> <use xlink:href="#paris-icon-arrow-bottom"></use> </svg> </span> </span> </button> </div> <div id="collapseAccheading` + tableId + index + `" class="m-0 collapse " role="region" aria-labelledby="headingAccheading` + tableId + index + `" data-parent="#accheading` + tableId + 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="#collapseAccheading` + tableId + index + `" aria-expanded="false" aria-controls="collapseAccheading` + tableId + 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> `; $('#accordion-table-' + tableId).append(accordionItem); }); }); </script>

Paramètres

Les paramètres cTable

id (string) optionnal - l'ID du table

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

Tooltip

Style guide Tooltip [New window] Doc Bootstrap Tooltip [New window]

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-1' 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-1' 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-1' 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-1' 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-1' 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-1' 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-1' 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-1' 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> <span class="d-inline-block m-0" 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-1' disabled=true /> </span> <@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-1" 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-1" 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-1" 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-1" 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-1" 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-1" 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-1" 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-1" 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-1" 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" aria-hidden="true" focusable="false" role="img" data-bs-toggle='tooltip' data-bs-placement='top' 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" aria-hidden="true" focusable="false" role="img" data-bs-toggle='tooltip' data-bs-placement='right' 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" aria-hidden="true" focusable="false" role="img" data-bs-toggle='tooltip' data-bs-placement='bottom' 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" aria-hidden="true" focusable="false" role="img" data-bs-toggle='tooltip' data-bs-placement='left' data-bs-custom-class='custom-tooltip' data-bs-title='Mon tooltip'> <use xlink:href="#paris-icon-nef"></use> </svg>

Paramètres

Les paramètres cTooltip

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

@cToast

Style guide @cToast [New window]

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

<button type="button" class="btn btn-primary" id="showToastButton">Notification toast par bouton déclencheur</button> <@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='mt-5'> <@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> <div class="mt-4 pt-2 border-top"> <@cBtn label='Action' class='primary m-1' size="mini" /> <@cBtn label='Fermer' class='secondary m-1' size="mini" params='data-bs-dismiss="toast"' /> </div> </@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 type="button" class="btn btn-primary" id="showToastButton">Notification toast par bouton déclencheur</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); }); // Afficher les toasts au chargement si showAll est vrai // 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 mt-5" 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-4 pt-2 border-top"> <button class="btn btn-primary m-1 btn-mini" type="submit"> <span class="btn-label ">Action</span> </button> <button class="btn btn-secondary m-1 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(); }); // Ajouter un écouteur d'événement sur le bouton spécifié si triggerId est fourni }); </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.

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