Prévisualisation Style guide @cAccordion [Nouvelle Fenêtre] Style guide responsive @cAccordion [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

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"

Exemple avec bordure ...et son sous-titre

Contenu de l'accordéon

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' titleClass='text-primary' header='<p class="ml-auto  pt-3 text-danger">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-outline-action' class='mt-5'>
Contenu de l'accordéon type "Info"
</@cAccordion>
<@cAccordion id='acc6' itle='Exemple avec bordure' subTitle='...et son sous-titre' border=true state=false>
Contenu de l'accordéon avec bordure
</@cAccordion>

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" data-toggle="collapse" data-target="#collapseAccacc1" aria-expanded="true" >
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1">
<span class="card-title d-block" id="headingAccacc1">Titre de l'accordéon</span>
<span class="btn-accordion" >
<span class="sr-only">Titre de l'accordéon</span>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</button>
<span class="card-subtitle w-100">...et son sous-titre</span>
</div>
<div id="collapseAccacc1" class="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-toggle="collapse" data-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>
<br>
<div class="accordion" id="accacc2">
<div class="card primary mt-5" >
<div class="card-header" data-toggle="collapse" data-target="#collapseAccacc2" aria-expanded="true" >
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-target="#collapseAccacc2" aria-expanded="true" aria-controls="collapseAccacc2">
<span class="card-title d-block text-primary" id="headingAccacc2">Accordéon avec titleClass et header...</span>
<p class="ml-auto pt-3 text-danger">Header</p>
<span class="btn-accordion" >
<span class="sr-only">Accordéon avec titleClass et header...</span>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</button>
</div>
<div id="collapseAccacc2" class="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-toggle="collapse" data-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>
<br>
<div class="accordion" id="accacc3">
<div class="card mt-5 with-subtitle" >
<div class="card-header" data-toggle="collapse" data-target="#collapseAccacc3" aria-expanded="true" >
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-target="#collapseAccacc3" aria-expanded="true" aria-controls="collapseAccacc3">
<span class="card-title d-block" id="headingAccacc3">Accordéon avec bouton action</span>
<span class="btn-accordion btn-outline-action" >
<span class="sr-only">Accordéon avec bouton action</span>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-arrow-bottom btn-outline-action" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</button>
<span class="card-subtitle w-100 text-muted">Sous titre</span>
</div>
<div id="collapseAccacc3" class="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-toggle="collapse" data-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>
<br>
<div class="accordion" id="accacc31">
<div class="card outline mt-5" >
<div class="card-header" data-toggle="collapse" data-target="#collapseAccacc31" aria-expanded="true" >
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-target="#collapseAccacc31" aria-expanded="true" aria-controls="collapseAccacc31">
<span class="card-header-prepend">
<span class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-info" focusable="false" >
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</span>
</span>
<span id="headingAccacc31">Accordéon avec outline</span>
<span class="card-header-separator"></span>
<span class="btn-accordion" >
<span class="sr-only">Accordéon avec outline</span>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</button>
</div>
<div id="collapseAccacc31" class="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-toggle="collapse" data-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>
<br>
<div class="accordion" id="accacc6">
<div class="card with-border with-subtitle" >
<div class="card-header collapsed" data-toggle="collapse" data-target="#collapseAccacc6" aria-expanded="false" >
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-target="#collapseAccacc6" aria-expanded="false" aria-controls="collapseAccacc6">
<span class="card-title d-block" id="headingAccacc6">Exemple avec bordure</span>
<span class="btn-accordion" >
<span class="sr-only">Exemple avec bordure</span>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</button>
<span class="card-subtitle w-100">...et son sous-titre</span>
</div>
<div id="collapseAccacc6" class="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-toggle="collapse" data-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>

Les paramètres

title ( text / Obligatoire ) : Titre de l'accordéon
id ( text / Obligatoire ) : Id nécessaire au fonctionnement de l'accordéon
class ( text / default : '' ) : Nom de classe. On peut ajouter autant de classes séparées par un espace.
titleClass ( text / default : '' ) : Nom de classe pour le titre de l'accordéon.
subTitle ( text / Obligatoire ) : Sous titre de l'accordéon
subTitleClass ( text / default : '' ) : Nom de classe pour le sous titre de l'accordéon.
btnClass ( text / default : '' ) : Nom de classe pour le bouton "collapse"
params ( text / default :'' ) : Tout autre attribut HTML
header ( text / default :'' ) : Contenu HTML ajouté au niveau du titre de l'accordéon.
border ( bool / Défaut : false ) : Si true une bordure est ajoutée.
state ( bool / Défaut : true ) : Si true l'accordéon est déplié par défaut
hasCollapse ( bool / Défaut : true ) : True affiche l'icône pour le collapse
<#nested> : Contenu présenté à l'intérieur de la macro.

Prévisualisation Style guide @cAlert [Nouvelle Fenêtre] Style guide responsive @cAlert [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Titre de alerte

Message erreur

Message d'erreur "outline"

Message d'erreur "outline" et suppression

Message attention...

Message de validation, confirmation...

Macro

<@cAlert>Titre de alerte</@cAlert>
<@cAlert class='danger mt-5' dismissible=false>Message erreur</@cAlert>
<@cAlert class='danger mt-5' dismissible=false outline=true >Message erreur "outline"</@cAlert>
<@cAlert class='danger mt-5' dismissible=true outline=true >Message d'erreur "outline" et suppression</@cAlert>
<@cAlert class='warning mt-5' dismissible=false>Message attention...</@cAlert>
<@cAlert class='warning mt-5' outline=true dismissible=false>Message attention...</@cAlert>
<@cAlert class='success mt-5' dismissible=false>Message de validation, confirmation...</@cAlert>
<@cAlert class='success mt-5' outline=true dismissible=false>Message de validation, confirmation...</@cAlert>
<@cAlert class='primary mt-5' dismissible=false>Message de validation, confirmation...</@cAlert>
<@cAlert class='primary mt-5' classText='text-warning' outline=true dismissible=false>Message de validation, confirmation...</@cAlert>

Html

<div class="alert alert-outline alert-primary alert-dismissible fade show" role="status">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-info" focusable="false" >
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</div>
</div>
<div class="alert-text">
Titre de alerte</div>
<div class="alert-dismiss">
<button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
<svg class="paris-icon paris-icon-alert-close" id="Fermer" focusable="false" >
<use xlink:href="#paris-icon-alert-close"></use>
</svg>
</button>
</div>
</div>
<div class="alert alert-outline alert-danger mt-5" role="alert">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-danger" focusable="false" >
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
</div>
<div class="alert-text">
Message erreur</div>
</div>
<div class="alert alert-outline alert-danger mt-5" role="alert">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-danger" focusable="false" >
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
</div>
<div class="alert-text">
Message d'erreur "outline"</div>
</div>
<div class="alert alert-outline alert-danger mt-5 alert-dismissible fade show" role="alert">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-danger" focusable="false" >
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
</div>
<div class="alert-text">
Message d'erreur "outline" et suppression</div>
<div class="alert-dismiss">
<button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
<svg class="paris-icon paris-icon-alert-close" id="Fermer" focusable="false" >
<use xlink:href="#paris-icon-alert-close"></use>
</svg>
</button>
</div>
</div>
<div class="alert alert-outline alert-warning mt-5" role="alert">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-warning" focusable="false" >
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
</div>
</div>
<div class="alert-text">
Message attention...</div>
</div>
<div class="alert alert-outline alert-warning mt-5" role="alert">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-warning" focusable="false" >
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
</div>
</div>
<div class="alert-text">
Message attention...</div>
</div>
<div class="alert alert-outline alert-success mt-5" role="status">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-check" focusable="false" >
<use xlink:href="#paris-icon-alert-check"></use>
</svg>
</div>
</div>
<div class="alert-text">
Message de validation, confirmation...</div>
</div>
<div class="alert alert-outline alert-success mt-5" role="status">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-check" focusable="false" >
<use xlink:href="#paris-icon-alert-check"></use>
</svg>
</div>
</div>
<div class="alert-text">
Message de validation, confirmation...</div>
</div>
<div class="alert alert-outline alert-primary mt-5" role="status">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-info" focusable="false" >
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</div>
</div>
<div class="alert-text">
Message de validation, confirmation...</div>
</div>
<div class="alert alert-outline alert-primary mt-5" role="status">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-info" focusable="false" >
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</div>
</div>
<div class="alert-text text-warning">
Message de validation, confirmation...</div>
</div>

Les paramètres

title ( texte / Défault : '' ) : Titre / texte de la boite d'alerte.
dismissible ( bool / Défaut : true ) : Si true affiche le bouton de suppression de l'alerte.
class ( texte / Défaut : 'primary' ) : Valeurs possibles: primary, danger, warning, success suivi de toute autre valeur de classe -séparé par un espace-
classText ( texte / Défaut : '' ) : Classe à ajouter au texte de l'alerte.
outline ( bool / Défaut : false ) : Si true applique le style "outline" sur l'alerte.
id ( text / Défault : '' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu présenté à l'intérieur de la macro.

Macro

<@cModal title='Modal' id='m1'>
<p>
    Contenu de la modal
</p>
</@cModal>

Html

<p class="text-info mt-5">Cliquer sur les boutons ci-dessous pour afficher les boîtes de dialogue.</p>
<hr>
<!-- Button trigger INFO -->
<button class="btn btn-action m-1" type="submit" data-toggle="modal" data-target="#example2Modal">
<span class="btn-label">Modal Défaut</span>
</button>
<div class="modal cmodal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="modalexampleTitle" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalexampleTitle">Exemple de modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-close" focusable="false" >
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<div class="modal-body">
<p>Contenu de la modal </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link-action" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<!-- Button trigger STATIC -->
<button class="btn btn-action m-1" type="submit" data-toggle="modal" data-target="#example2Modal">
<span class="btn-label">Modal Static</span>
</button>
<div class="modal cmodal fade" id="example2Modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalexample2Title" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalexample2Title">Exemple de modal 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-close" focusable="false" >
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<div class="modal-body">
<p>Contenu de la modal static</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link-action" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<!-- Button trigger CONFIRM -->
<button class="btn btn-action m-1" type="submit" data-toggle="modal" data-target="#example3Modal">
<span class="btn-label">Modal Confirm</span>
</button>
<div class="modal cmodal fade" id="example3Modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalexample3Title" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalexample3Title">Exemple de modal 3</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-close" focusable="false" >
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<div class="modal-body">
<p>Contenu de la modal "Confirm"</p>
</div>
<div class="modal-footer">
<button class="btn btn-action m-1" type="submit">
<span class="btn-label">Confirmer</span>
</button>
<button type="button" class="btn btn-link-action" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<!-- Button trigger Avec Boutons -->
<button class="btn btn-action m-1" type="submit" data-toggle="modal" data-target="#example4Modal">
<span class="btn-label">Modal Valider</span>
</button>
<div class="modal cmodal fade" id="example4Modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalexample4Title" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalexample4Title">Exemple de modal 4</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-close" focusable="false" >
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<div class="modal-body">
<p>Contenu de la modal "Confirm"</p>
</div>
<div class="modal-footer">
<button class="btn btn-action m-1" type="submit">
<span class="btn-label">Valider</span>
</button>
<button type="button" class="btn btn-link-action" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>

Prévisualisation Style guide responsive @cCarousel [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Le hasard

Fait bien

Mais pas que...

Les choses

Macro

<@cCarousel id='Manege' items='' indicatorSize=3>
  <@cCarouselItem img='https://picsum.photos/id/10/2500/1667' title='Le hasard'></@cCarouselItem>
  <@cCarouselItem img='https://picsum.photos/id/1016/3844/2563' title='Fait bien' subtitle='Mais pas que...'></@cCarouselItem>
  <@cCarouselItem img='https://picsum.photos/id/1019/5472/3648' title='Les choses'></@cCarouselItem>
</@cCarousel>

Html

<div id="manege" class="carousel carousel-themed slide" data-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<ol class="carousel-indicators pagination">
<li class="page-item active" data-target="#manege" data-slide-to="0" aria-label="Slide 0" aria-selected="false" aria-controls="carousel-item-0"><span class="page-link">1</span></li>
<li class="page-item" data-target="#manege" data-slide-to="1" aria-label="Slide 1" aria-selected="false" aria-controls="carousel-item-1"><span class="page-link">2</span></li>
<li class="page-item" data-target="#manege" data-slide-to="2" aria-label="Slide 2" aria-selected="false" aria-controls="carousel-item-2"><span class="page-link">3</span></li>
</ol>
<div class="carousel-inner">
<div id="manege-item-1" class="carousel-item active" role="group" aria-roledescription="slide" aria-label="1 of 1">
<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 id="manege-item-1" class="carousel-item" role="group" aria-roledescription="slide" aria-label="1 of 1">
<img src="https://picsum.photos/id/1016/3844/2563" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
<div id="manege-item-1" class="carousel-item" role="group" aria-roledescription="slide" aria-label="1 of 1">
<img src="https://picsum.photos/id/1019/5472/3648" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>Les choses</h3>
<p></p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#manege" role="button" data-slide="prev">
<span class="carousel-bg-control">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</span>
</a>
<a class="carousel-control-next" href="#manege" role="button" data-slide="next">
<span class="carousel-bg-control">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</span>
</a>
</div>

Les paramètres

id ( text / Défaut : 'manege' ) : Identifiant de la modal.
items ( list / Défaut : empty string ' ) : Liste des images du carousel. Si vide le contenu "#nested" sera utilisé.
indicatorSize ( number / Défaut : '0' ) : 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.
controls ( bool / Défaut : false ) : Affiche les boutons "Previous" et "Next"
label ( text / Défaut : '' ) : Libellé / titre du carousel.
labelPrev ( text / Défaut : '' ) : Libellé du bouton précédent.
labelNext ( text / Défaut : '' ) : Libellé du bouton suivant.
class ( text / Défaut : '' ) : Classes CSS.
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à l'intérieur de la modal, utiliser la macro @cCarouselItem

Les paramètres de cCarouselItem

img ( text / Obligatorie ) : Image.
active ( bool / Défaut : false ) : Indique l'image active
id ( text / Défaut : 'manege' ) : Identifiant de la modal.
idx ( number / Défaut : 1 ) : Index de l'image.
max ( number / Défaut : 1 ) : Nombre max d'images affichées.
alt ( text / Obligatoire ) : Attribut alt de l'image
title ( text / Défaut : '' ) : Titre de l'image
subtitle ( text / Défaut : '' ) : Sous titre de l'image
class ( text / Défaut : '' ) : Classes CSS.
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à l'intérieur de la modal, utiliser la macro @cCarouselItem

Aide

Permet de créer un carousel. A utiliser avec la macro @cCarouselItem

Prévisualisation Style guide @cCard [Nouvelle Fenêtre] Style guide responsive @cCard [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Carte

Sous titre card

Contenu de la carte

Decouvrir Lutece Decouvrir Lutece

Carte

Sous titre card

Contenu de la carte

Decouvrir Lutece Decouvrir Lutece

Carte avec image

Lorem ipsum dolor sit amet.

Carte avec image et pied de page

Sous titre card

Lorem ipsum dolor sit amet.

What else ?

Carte Format Horizontal

Contenu de la carte

Macro

<@cCard title='Card' subtitle="Sous titre card">
<p class="my-5">
 Contenu de la carte 
</p>
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
</@cCard> 
<@cCard title='Carte avec image' subtitle='Sous titre card' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'">
<p class="my-5">
 Contenu de la carte 
</p>
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
 </@cCard> 
<@cCard title='Card' subtitle="Sous titre card">
<p class="my-5">
 Contenu de la carte 
</p>
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
 </@cCard> 
<@cCard title='Card' subtitle="Sous titre card" class='no-shadow'>
<p class="my-5">
 Contenu de la carte 
</p>
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
</@cCard>

Html

<div class="card ">
<div class="card-body">
<h3 class="card-title">Carte</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p>Contenu de la carte</p>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
</div>
</div>
<br>
<div class="card main no-shadow">
<div class="card-body">
<h3 class="card-title">Carte</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p>Contenu de la carte</p>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
</div>
</div>
<br>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image</h3>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
<br>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image et pied de page</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
<div class="card-footer text-muted"><p class="text-center">What else ?</p></div>
</div>
<div class="card ">
<div class="row no-gutters">
<div class="col-md-4">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img" alt="">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Carte Format Horizontal</h5>
<p class="card-text d-flex justify-content-between">Contenu de la carte
<button class="btn btn-action text-right" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
</div>
</div>

Les paramètres

title ( text / '' ) : Titre de la carte
titleClass ( text / '' ) : Classe du titre de la carte
titleUrl ( text / '' ) : Url du titre de la carte
subtitle( text / Défaut : '' ) : Sous-titre
subtitleClass( text / Défaut : '' ) : Classe du sous-titre
class( text / Défaut : '' ) : Classe CSS.
id( text / Défaut : '' ) : Identifiant
img( text / Défaut : '' ) : Url de la ressource image.
imgAlt( text / Défaut : '' ) : Alt de la ressource image.
header( text / Défaut : '' ) : Contenu du header si nécessaire
headerClass( text / Défaut : '' ) : Class du header si nécessaire
headerImg( text / Défaut : '' ) : Url de la ressource image.
subHeader( text / Défaut : '' ) : Contenu du header si nécessaire
subHeaderClass( text / Défaut : '' ) : Class du header si nécessaire
footer( text / Défaut : '' ) : Contenu du footer si nécessaire
footerClass( text / Défaut : '' ) : Class du footer si nécessaire
orientation( text / Défaut : 'v' ) : Par défaut -v- Image au dessus du texte de la carte, si 'h' l'image sera positionnée à gauche et le contenu à droite.
hoverEffect( boolean / Défaut : true ) : Ajoute un effet sur le hover de l'image de la carte.
shadow( boolean / Défaut : true ) : Supprime l'ombre et ajoute une bordure.
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la "card".

Prévisualisation Style guide @cCardFloating [Nouvelle Fenêtre] Style guide responsive @cCardFloating [Nouvelle Fenêtre]

Carte Flotante

Contenu de la carte flottante

Decouvrir Lutece Decouvrir Lutece

Macro

<@cCardFloating title='Card Floating'>
<p class="my-5">
 Contenu de la carte 
</p>
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
<@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
 </@cCardFloating>

Html

<section class="py-5 mb-5 position-relative">
<div class="card card-floating d-block" id="float-card" >
<div class="card-header">
<span class="ml-auto">
<span class="fas fa-times" title="Fermer" aria-hidden="true" data-target="#float-card" data-dismiss="alert" role="button">
</span>
</span>
</div>
<div class="card-body">
<h3 class="card-title">Carte Flotante</h3>
<p>Contenu de la carte flottante</p>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
</div>
</div>
</section>

Les paramètres

id( text / Obligatoire ) : Identifiant de la carte
title ( text / '' ) : Titre du contenu
class( text / Défaut : '' ) : Classe CSS.
dismissible( boolean / Défaut : true ) : Ajoute la posiibilité de fermer la carte.
shadow( boolean / Défaut : true ) : Supprime l'ombre et ajoute une bordure.
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la "card".

Prévisualisation Style guide responsive Mise en page Card [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Card Layout par défault "group"

Carte

Sous titre card

Contenu de la carte

Decouvrir Lutece Decouvrir Lutece

Carte avec image

Lorem ipsum dolor sit amet.

Carte avec image et pied de page

Sous titre card

Lorem ipsum dolor sit amet.

Card Layout "deck"

Carte

Sous titre card

Contenu de la carte

Decouvrir Lutece Decouvrir Lutece

Carte avec image

Lorem ipsum dolor sit amet.

Carte avec image et pied de page

Sous titre card

Lorem ipsum dolor sit amet.

Card Layout "columns"

Carte

Sous titre card

Contenu de la carte

Decouvrir Lutece Decouvrir Lutece

Carte avec image

Lorem ipsum dolor sit amet.

Carte avec image et pied de page

Sous titre card

Lorem ipsum dolor sit amet.

Carte avec image

Lorem ipsum dolor sit amet.

Carte

Sous titre card

Contenu de la carte

Decouvrir Lutece Decouvrir Lutece

Carte avec image

Lorem ipsum dolor sit amet.

Macro

<@cCardLayout>
 <@cCard title='Card' subtitle="Sous titre card">
     <p class="my-5">
     Contenu de la carte 
     </p>
     <@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
     <@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
 </@cCard> 
 <@cCard title='Carte avec image' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'>
     <p class="card-text">Lorem ipsum dolor sit amet.</p>
     <p class="text-right"><@cBtn label=' Voir ' class='action' /></p>
 </@cCard> 
 <@cCard title='Carte avec image' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'>
     <p class="card-text">Lorem ipsum dolor sit amet.</p>
     <p class="text-right"><@cBtn label=' Voir ' class='action' /></p>
 </@cCard> 
</@cCardLayout>
<@cCardLayout type="deck">
 <@cCard title='Card' subtitle="Sous titre card">
     <p class="my-5">
     Contenu de la carte 
     </p>
     <@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
     <@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
 </@cCard> 
 <@cCard title='Carte avec image' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'>
     <p class="card-text">Lorem ipsum dolor sit amet.</p>
     <p class="text-right"><@cBtn label=' Voir ' class='action' /></p>
 </@cCard> 
 <@cCard title='Carte avec image' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'>
     <p class="card-text">Lorem ipsum dolor sit amet.</p>
     <p class="text-right"><@cBtn label=' Voir ' class='action' /></p>
 </@cCard> 
</@cCardLayout>
<@cCardLayout type="columns">
 <@cCard title='Card' subtitle="Sous titre card">
     <p class="my-5">
     Contenu de la carte 
     </p>
     <@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
     <@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
 </@cCard> 
 <@cCard title='Carte avec image' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'>
     <p class="card-text">Lorem ipsum dolor sit amet.</p>
     <p class="text-right"><@cBtn label=' Voir ' class='action' /></p>
 </@cCard> 
 <@cCard title='Carte avec image' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'>
     <p class="card-text">Lorem ipsum dolor sit amet.</p>
     <p class="text-right"><@cBtn label=' Voir ' class='action' /></p>
 </@cCard> 
 <@cCard title='Carte avec image' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'>
     <p class="card-text">Lorem ipsum dolor sit amet.</p>
     <p class="text-right"><@cBtn label=' Voir ' class='action' /></p>
 </@cCard> 
 <@cCard title='Card' subtitle="Sous titre card">
     <p class="my-5">
     Contenu de la carte 
     </p>
     <@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
     <@cLink href='http://fr.lutece.paris.fr' label='Decouvrir Lutece' class='btn btn-link card-link' target='_blank' />
 </@cCard> 
 <@cCard title='Carte avec image' img='images/paul-dufour-5XndD3FhH-w-unsplash.png'>
     <p class="card-text">Lorem ipsum dolor sit amet.</p>
     <p class="text-right"><@cBtn label=' Voir ' class='action' /></p>
 </@cCard> 
</@cCardLayout>

Html

<h3>Card Layout par défault "group"</h3>
<hr class="my-3">
<div class="card-group">
<div class="card ">
<div class="card-body">
<h3 class="card-title">Carte</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p>Contenu de la carte</p>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
</div>
</div>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image</h3>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image et pied de page</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
</div>
<h3>Card Layout "deck"</h3>
<hr class="my-3">
<div class="card-deck">
<div class="card ">
<div class="card-body">
<h3 class="card-title">Carte</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p>Contenu de la carte</p>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
</div>
</div>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image</h3>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image et pied de page</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
</div>
<h3>Card Layout "columns"</h3>
<hr class="my-3">
<div class="card-columns">
<div class="card ">
<div class="card-body">
<h3 class="card-title">Carte</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p>Contenu de la carte</p>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
</div>
</div>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image</h3>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image et pied de page</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image</h3>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
<div class="card ">
<div class="card-body">
<h3 class="card-title">Carte</h3>
<h4 class="card-subtitle mb-2 text-muted">Sous titre card</h4>
<p>Contenu de la carte</p>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
<a href="http://fr.lutece.paris.fr" class="btn btn-link card-link"" target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
</div>
</div>
<div class="card ">
<figure class="card-figure"><img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt=""></figure>
<div class="card-body">
<h3 class="card-title">Carte avec image</h3>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
<p class="text-right">
<button class="btn btn-action" type="submit">
<span class="btn-label"> Voir </span>
</button>
</p>
</div>
</div>
</div>

Les paramètres

type ( text /Défaut : 'group' ) : Type de mise en forme. 3 Valeurs possible, "group", "deck" ou "columns"
class( text / Défaut : '' ) : CSS Class
id( text / Défaut : '' ) : Identifiant
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu, é savoir plusieurs @cCard

Documentation Bootstrap 4 Documentation Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cConsentTac [Nouvelle Fenêtre]

La macro @cConsentTac permet la gestion du consentement en utilisant la librairie TarteAuCitron TarteAuCitron [Nouvelle Fenêtre] .

Macro

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

Html

<link rel="stylesheet" href="js/tarteaucitron/css/theme-parisfr-tac.css" >
<script src="js/tarteaucitron/tarteaucitron.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({
"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>
<span class="sr-only sr-only-focusable">TarteAuCitron [Nouvelle Fenêtre]</span>
</a>
.</p>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/cookie-consent.png" alt="" class="img-fluid">

Elément @cConsentTac: Gestion des Cookies CNIL ave cla librairie TarteAuCitron - https://tarteaucitron.io/fr /

Les paramètres

title( text / Défaut : 'Ce site' ) : Titre .
privacyLink( text / Défaut : '//www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees' ) : Lien vers la page de protection des données personnelles de Paris.fr.
denyAll( boolean / false ) : Option permettant d'afficher le bouton "Tout refuser"
cookieMenu( text / Défaut : 'Gestion des cookies' ) : Libellé du ien footer pour gérer les cookies
cookiePolicyLink( text / Défaut : 'https://www.paris.fr/pages/cookies-234' ) : Lien vers la page Gestion des cookies de Paris.fr.
hashtag( text / Défaut : 'cookiepolicyparisfr' ) : Identifiant pour modal de gestion du consentement
cookiename( text / Défaut : 'cookieparisfr' ) : Nom du cookie posé pour le consentement
nocredit( boolean / false ) : Option permettant d'afficher les crédit du projet TarteAuCitron
#nested ( Obligatoire ): Déclarer les services par les macros cConsentTacService ou cConsentTacServiceMatomo.

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 documentation d'installation [Nouvelle Fenêtre]

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

Prévisualisation Style guide @cInfoStep [Nouvelle Fenêtre] Style guide responsive @cInfoStep [Nouvelle Fenêtre]

Etape Vide
Etape 25%
Etape 50%
Etape 75%
Etape 100%

Etape Vide
Etape 25%
Etape 50%
Etape 75%
Etape 100%

Etape Vide
Etape 50%
Etape 100%

Etape Vide
Etape 50%
Etape 100%

Etape Vide

One morning, when Gregor Samsa woke from troubled dreams, ... he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. Voir plus
Etape 50%

One morning, when Gregor Samsa woke from troubled dreams, ... he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper human Voir plus
Etape 100%

Contenu de mon étape à ajouter en sus du reste

Macro

<#assign lstep = [
{"title":"Etape Vide", "url":"images/fa-battery-0.png"},
{"title":"Etape 25% ", "url":"images/fa-battery-1.png"},
{"title":"Etape 50% ", "url":"images/fa-battery-2.png"},
{"title":"Etape 75% ", "url":"images/fa-battery-3.png"},
{"title":"Etape 100%", "url":"images/fa-battery-4.png"}
]>
...
<@cInfoStep lstep true true />
...
<@cInfoStep lstep />
...
<#assign lstep2 = [
{"title":"Etape Vide","content":"Contenu de mon étape à ajouter en sus du reste, car il ne faut pas vraiment pas etc etc", "url":"images/fa-battery-0.png"},
{"title":"Etape 50% ","content":"Contenu de mon étape", "url":"images/fa-battery-2.png"},
{"title":"Etape 100%","content":"Contenu de mon étape à ajouter en sus du reste, car il ne faut pas vraiment pas etc etc", "url":"images/fa-battery-4.png"}
]>
...
<@cInfoStep steps=lstep2 title=true />
...
<@cInfoStep steps=lstep2 title=true showMore=50 />

Html

<div class="container">
<div class="row ">
<div class="col ">
<div class="info-step">
<ol class="info-step-list list-idx" >
<li>
<figure class="p-3" data-idx="1" aria-hidden="true">
<img src="images/fa-battery-0.png" class="img-fluid" title="Etape Vide" alt="Etape Vide" aria-hidden="true">
</figure>
<p id="step-title-1" class="mt-2">Etape Vide</p>
</li>
<li>
<figure class="p-3" data-idx="2" aria-hidden="true">
<img src="images/fa-battery-1.png" class="img-fluid" title="Etape 25% " alt="Etape 25% " aria-hidden="true">
</figure>
<p id="step-title-2" class="mt-2">Etape 25% </p>
</li>
<li>
<figure class="p-3" data-idx="3" aria-hidden="true">
<img src="images/fa-battery-2.png" class="img-fluid" title="Etape 50% " alt="Etape 50% " aria-hidden="true">
</figure>
<p id="step-title-3" class="mt-2">Etape 50% </p>
</li>
<li>
<figure class="p-3" data-idx="4" aria-hidden="true">
<img src="images/fa-battery-3.png" class="img-fluid" title="Etape 75% " alt="Etape 75% " aria-hidden="true">
</figure>
<p id="step-title-4" class="mt-2">Etape 75% </p>
</li>
<li>
<figure class="p-3" data-idx="5" aria-hidden="true">
<img src="images/fa-battery-4.png" class="img-fluid" title="Etape 100%" alt="Etape 100%" aria-hidden="true">
</figure>
<p id="step-title-5" class="mt-2">Etape 100%</p>
</li>
</ol>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="info-step">
<ol class="info-step-list " >
<li>
<div class="idx" data-idx="1" aria-hidden="true">
<span>1</span>
</div>
<p id="step-title-1" class="mt-2">Etape Vide</p>
</li>
<li>
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<p id="step-title-2" class="mt-2">Etape 25% </p>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<p id="step-title-3" class="mt-2">Etape 50% </p>
</li>
<li>
<div class="idx" data-idx="4" aria-hidden="true">
<span>4</span>
</div>
<p id="step-title-4" class="mt-2">Etape 75% </p>
</li>
<li>
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<p id="step-title-5" class="mt-2">Etape 100%</p>
</li>
</ol>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="info-step">
<ol class="info-step-list " >
<li>
<div class="idx" data-idx="1" aria-hidden="true">
<span>1</span>
</div>
<div class="info-step-title">
<h2 id="step-title-1" class="h3 text-center font-weight-bold mt-2">Etape Vide</h2>
<p class="infostep-more"></p>
</div>
</li>
<li>
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<div class="info-step-title">
<h2 id="step-title-2" class="h3 text-center font-weight-bold mt-2">Etape 50% </h2>
<p class="infostep-more"></p>
</div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<div class="info-step-title">
<h2 id="step-title-3" class="h3 text-center font-weight-bold mt-2">Etape 100%</h2>
<p class="infostep-more"></p>
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<!-- Warning : wrong or deprecated argument(s) : showContent, ... -->
<div class="info-step">
<ol class="info-step-list " >
<li>
<div class="idx" data-idx="1" aria-hidden="true">
<span>1</span>
</div>
<div class="info-step-title">
<h2 id="step-title-1" class="h3 text-center font-weight-bold mt-2">Etape Vide</h2>
<p class="infostep-more"></p>
</div>
</li>
<li>
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<div class="info-step-title">
<h2 id="step-title-2" class="h3 text-center font-weight-bold mt-2">Etape 50% </h2>
<p class="infostep-more"></p>
</div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<div class="info-step-title">
<h2 id="step-title-3" class="h3 text-center font-weight-bold mt-2">Etape 100%</h2>
<p class="infostep-more"></p>
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<!-- Warning : wrong or deprecated argument(s) : showContent, ... -->
<div class="info-step">
<ol class="info-step-list " >
<li>
<div class="idx" data-idx="1" aria-hidden="true">
<span>1</span>
</div>
<div class="info-step-title">
<h2 id="step-title-1" class="h3 text-center font-weight-bold mt-2">Etape Vide</h2>
<p class="infostep-more"> One morning, when Gregor Samsa woke from troubled dreams, <span class="ellipsis">...</span>
<span class="extra sr-only">he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</span>
<span class="d-block text-center mt-2">
<a href="#" class="btn-infostep-more main-color text-decoration-none h6" title="Voir plus" >
<span class="fas fa-angle-up hidden" title="Retour" aria-hidden="true" >
</span>
<span class="link-label">Voir plus</span>
</a>
</span>
</p>
</div>
</li>
<li>
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<div class="info-step-title">
<h2 id="step-title-2" class="h3 text-center font-weight-bold mt-2">Etape 50% </h2>
<p class="infostep-more"> One morning, when Gregor Samsa woke from troubled dreams, <span class="ellipsis">...</span>
<span class="extra sr-only">he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper human</span>
<span class="d-block text-center mt-2">
<a href="#" class="btn-infostep-more main-color text-decoration-none h6" title="Voir plus" >
<span class="fas fa-angle-up hidden" title="Retour" aria-hidden="true" >
</span>
<span class="link-label">Voir plus</span>
</a>
</span>
</p>
</div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<div class="info-step-title">
<h2 id="step-title-3" class="h3 text-center font-weight-bold mt-2">Etape 100%</h2>
<p class="infostep-more"> Contenu de mon étape à ajouter en sus du reste
</p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>

Les paramètres

steps ( list / Défaut : '' ) : Objet list avec items de menu. L'objet contient un attribut 'titre', un attribut content, contenu en sus du titre, un attribut 'url' pour une ressource image et un attribut 'target'.
haspicto ( bool / Défaut : false ) : Affiche la ressource image 'steps.url'.
hasidx ( bool / Défaut : false ) : Affiche un index sous forme de puce sur une étape.
title ( bool / Défaut : false ) : Si true on utilise le contenu de l'attribut titre avec un style de titre.
class ( text / Défaut : '' / "pie" | ... ) : Si ajout de la classe "pie" les info sont affichée sous forme de camenbert, sinon toute classe CSS.
showMore ( int / Défaut : 0 ) : Si supérieur à 0 les n premier caractère, chiffre du paramètre, du contenu - attribut titre + content ou content si titre est vrai- seront affiché et un bouton "Voir plus" pour affiché le reste sera ajouté
labelMore ( text / default :'Voir plus') : Libellé du bouton pour afficher le contenu.
a11StatusMsg ( text / default :'') : Libellé pour accessibilité inclu un texte de statut masqué.
class ( text / default :'' ) : Classe css
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu de liste '
...

Aide

Ce composant est uniquement éditorial et permet de présenter graphiquement des étapes.

Prévisualisation Style guide @cLink [Nouvelle Fenêtre] Style guide responsive @cLink [Nouvelle Fenêtre]

Decouvrir Lutece Decouvrir Lutece [Nouvelle Fenêtre]

Decouvrir Paris.fr

OW2 OW2 is an independent, global, open-source software community [Nouvelle Fenêtre]

Macro

<@cLink href='https://fr.lutece.paris.fr' label='Decouvrir Lutece' target='_blank' />
<@cLink href='https://paris.fr' label='Decouvrir Paris.fr' title='Site de la Ville de Paris' nestedPos='before' />
  <@parisIcon name='shortcut/id-card' title='information' class='main-color' />
</@cLink>
<@cLink href='https://paris.fr' label='Decouvrir Paris.fr' class='btn btn-action'  title='Site de la Ville de Paris' nestedPos='before' />
  <@parisIcon name='check' title='information' class='main-color' />
</@cLink>
<@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' />

Html

<p>
<a href="http://fr.lutece.paris.fr" " target="_blank" >
<span class="link-label">Decouvrir Lutece</span>
<span class="sr-only sr-only-focusable">Decouvrir Lutece [Nouvelle Fenêtre]</span>
</a>
</p>
<p>
<a href="http://paris.fr" title="Site de la Ville de Paris" >
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-shortcut/id-card main-color" focusable="false" >
<use xlink:href="#paris-icon-shortcut/id-card"></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" >
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-check text-white" focusable="false" >
<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" target="_blank" >
<span class="link-label">OW2</span>
<span class="sr-only sr-only-focusable">OW2 is an independent, global, open-source software community [Nouvelle Fenêtre]</span>
</a>
</p>

Les paramètres

href ( text / obligatoire ) : Url du lien
label ( text / obligatoire ) : Libellé du lien
title ( text / default :'' ) : Titre du lien. Attention doit étre différent du lien et explicatif, sinon il n'est pas nécessaire si le label est suffisament explicite -RGAA v4-
nestedPos ( text / default :'after' ) : Position du contenu "#nested". Par défaut après le contenu, si autre valeur présenté avant
target ( text / default :'' ) : Valoriser avec les valeur : _blank, _top, _parent ou id
showTitle ( boolean / default : false ) : Ajoute l'attribute title avec le libellé du paramètre "title"
class ( text / default :'' ) : Les classes de la charte sont 'btn btn-primary', 'btn btn-link-primary', 'btn btn-link-action' ou 'btn btn-action'. Il est possible de choisir toute autre classe
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu présenté à l'intérieur de la macro.

Aide

Consulter aussi sur la page "Formulaires" la macro @cBtn et les icones

Prévisualisation Style guide @cList [Nouvelle Fenêtre] Style guide responsive @cList [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Liste de liens

Liste de fichiers

Liste de liens

Macro

<#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":""}
]>
...
<@cList ls>
<#-- Optionnel -->
<li>
  <@cLink href='https://paris.fr' label='Decouvrir Paris.fr' title='Site de la Ville de Paris' />
</li>
</@cList>

Html

<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" 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" href="https://www.paris.fr/municipalite" title="Consultation du PLU" >
<span>Consultation du PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" title="Site de la Ville de Paris" >
<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" 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>
<span>pdf</span>
</div>
</a>
</li>
<li class="custom-list-item ">
<a class="d-flex justify-content-between" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx">
<span>PLU.docx </span>
<div class="files-info">
<small>80ko</small>
<span>pdf</span>
</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" >
<li class="custom-list-item ">
<a class="d-flex justify-content-between" 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" 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" 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" 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" 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" 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="text-danger btn-more" title="Voir plus" >
<span class="fas fa-plus" title="Voir plus" aria-hidden="true" >
</span>
<span class="link-label">Voir plus</span>
</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-default" >
<li class="custom-list-item arobase">
<a class="d-flex justify-content-between" 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 arobase">
<a class="d-flex justify-content-between" href="https://lutece.paris.fr/" title="Tout sur Lutéce" >
<span>Tout sur Lutéce </span>
</a>
</li>
<li class="custom-list-item screen">
<a class="d-flex justify-content-between" 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>
</ul>
</div>
</div>

cList items type='default' class='' id='' params=''

Les paramètres

items ( list / Défaut : '' ) : Objet list avec items de menu. L'objet contient un attribut 'titre', un attribut 'url' et un attribut 'target'.
type ( text / Défaut : 'default' ) : Valeurs possibles 'default' liste avec fléche, 'more' liste "Voir Plus", 'files' pour les listes de fichiers.
itemsShown ( text / Défaut : 0 ) : Nombre d'item de list affiché pour liste 'more'.
indexShown ( bool / Défaut : false ) : Affiche un index.
labelMore ( text / Défaut : 'Voir plus' / var i18n("themeparisfr.labelShowMore") ) : Libellé pour liste 'more'.
class ( text / Défaut : '' ) : Toute classe CSS.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu de liste '>@chItem<...>/@chItem<' à ajouter à l'intérieur de la macro.

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.. */
    }

Prévisualisation Style guide responsive @cErrorMessage [Nouvelle Fenêtre]

Erreur Enorme

Grossière erreur tout est à revoir

On y va !

Macro

<@cErrorMessage title='Erreur Enorme' text='Grossière erreur tout est à revoir' linkUrl='.' linkLabelUrl='On y va !' />

Html

<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col col mt-5 pt-5 text-center">
<h1 class="main-info-color font-black">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-info" focusable="false" style="fill:var( --main-info-color);width:64px;height:64px;">
<use xlink:href="#paris-icon-info"></use>
</svg>
Erreur Enorme
</h1>
<h2 class="py-5 font-extra-bold dark-color">
Grossière erreur tout est à revoir</h2>
<p class="text-center">
<a href="." class="btn btn-action mt-5"" >
<span class="link-label">On y va !</span>
</a>
</p>
</div>
</div>
</div>

Macro @cErroMessage: Gestion des messages d'erreur

Les paramètres

title( text / Obligatoire ) : Titre du message.
text( text / Obligatoire ) : Texte du message
linkUrl( text / Défaut : '' ) : Lien de retour.
linkLabelUrl( text / Défaut : '' ) : Libellé du lien de retour.
id( text / Défaut : '' ) : Identifiant
class( text / Défaut : 'text-center' ) : Classe CSS, texte centré par défaut
params ( text / default :'' ) : Tout autre attribut HTML

Prévisualisation Style guide @cTabs [Nouvelle Fenêtre] Style guide responsive @cTabs [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Contenu Tab 1

Contenu Tab 2

Contenu Tab 3

Contenu Tab 4

Macro

<#assign ls = [
{"title":"Etape Initiale", "url":"https://imgplaceholder.com/50x50/000/fff/fa-flag"
{"title":"Consultation du PLU", "url":"https://www.paris.fr/municipalite", "target":""}
]>
...
<@cTabs>
     <@cTab url='' id='tab1'>Onglet 1</@cTab>
     <@cTab url='' id='tab2'>Onglet 2</@cTab>
     <@cTab url='' id='tab3'>Onglet 3</@cTab>
     <@cTab url='' id='tab4' disabled=false >Onglet 4</@cTab>
</@cTabs>
<@cTabs id='menu'>
     <@cTab url='' id='tab1'>Onglet 1</@cTab>
     <@cTab url='' id='tab2'>Onglet 2</@cTab>
     <@cTab url='' id='tab3'>Onglet 3</@cTab>
     <@cTab url='' id='tab4' disabled=false >Onglet 4</@cTab>
</@cTabs>
<@cTabs id='menu1' class='background main-bg-color'>
     <@cTab url='' >Onglet 1</@cTab>
     <@cTab url='' >Onglet 2</@cTab>
     <@cTab url='' >Onglet 3</@cTab>
     <@cTab url='' active=true disabled=false >Onglet 4</@cTab>
</@cTabs>
<@cTabs class='bordered' >
     <@cTab url='' id='tab1' class='text-success' active=true >Onglet 1</@cTab>
     <@cTab url='' id='tab2' class='text-success'> Onglet 2</@cTab>
     <@cTab url='' id='tab3' class='text-success'>Onglet 3</@cTab>
     <@cTab url='' id='tab4' class='text-success' disabled=false >Onglet 4</@cTab>
</@cTabs>
<@cTabs navigation=false navigation=false params=' data-menu="tab5"'
     <@cTab url='#Tab1' id='tab1' navigation=false>Onglet 1</@cTab>
     <@cTab url='#Tab2' id='tab2' navigation=false> Onglet 2</@cTab>
     <@cTab url='#Tab3' id='tab3' navigation=false >Onglet 3</@cTab>
     <@cTab url='#Tab4' id='tab1' navigation=false>Onglet 4</@cTab>
</@cTabs>
<@cTabContent id='myContent'>
    <@cTabPane id='Tab1' class='main-warning-bg-color'>
     <p class="text-white">Contenu Tab 1</p>
    </@cTabPane>
    <@cTabPane id='Tab2' class='main-info-bg-color'>
        <p class="text-white">Contenu Tab 2</p>
    </@cTabPane>
    <@cTabPane id='Tab3' active=true class='main-success-bg-color'>
        <p class="text-white">Contenu Tab 3</p>
    </@cTabPane>
    <@cTabPane id='Tab4'  class='main-danger-bg-color'>
    <p class="text-white">Contenu Tab 4</p>
    </@cTabPane>
</@cTabContent>

Html

<nav>
<ul class="nav nav-tabs" role="tablist" >
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link active" aria-selected="true">
Onglet 1</button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 2 </button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 3</button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 4</button>
</ul>
</nav>
<nav>
<ul class="nav nav-tabs" role="tablist" >
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 1</button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link active" aria-selected="true">
Onglet 2 </button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 3</button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link disabled" disabled tabindex="-1" aria-disabled="true" aria-selected="false">
Onglet 4</button>
</ul>
</nav>
<nav>
<ul class="nav nav-tabs background main-bg-color" role="tablist" >
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 1</button>
<button type="button" id="icon" aria-controls="icon" data-toggle="tab" role="tab" data-target="#icon" class="nav-link" tabindex="-1" aria-selected="false">
<svg class="paris-icon paris-icon-comment" id="Commenter" focusable="false" >
<use xlink:href="#paris-icon-comment"></use>
</svg>
Onglet 2 </button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 3</button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link active" aria-selected="true">
Onglet 4</button>
</ul>
</nav>
<nav>
<ul class="nav nav-tabs bordered" role="tablist" >
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link active main-info-color" aria-selected="true">
Onglet 1</button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link main-info-color" tabindex="-1" aria-selected="false">
Onglet 2</button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link main-info-color" tabindex="-1" aria-selected="false">
Onglet 3</button>
<button type="button" id="tab_TabMenu4" aria-controls="TabMenu4" data-toggle="tab" role="tab" data-target="#TabMenu4" class="nav-link main-info-color" tabindex="-1" aria-selected="false">
Onglet 4</button>
</ul>
</nav>
<div class="tab-content" id="menu4" deprecated...>
<div class="tab-pane fade d-none" id="TabMenu4" tabindex="0" role="tabpanel" aria-labelledby="tab_TabMenu4" >
<p class="text-white">Contenu All Tabs</p>
</div>
</div>
<div class="nav nav-tabs" role="tablist" data-menu="tab5">
<button type="button" id="tab_Tab1" aria-controls="Tab1" data-toggle="tab" role="tab" data-target="#Tab1" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 1</button>
<button type="button" id="tab_Tab2" aria-controls="Tab2" data-toggle="tab" role="tab" data-target="#Tab2" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 2 </button>
<button type="button" id="tab_Tab3" aria-controls="Tab3" data-toggle="tab" role="tab" data-target="#Tab3" class="nav-link active" aria-selected="true">
Onglet 3</button>
<button type="button" id="tab_Tab4" aria-controls="Tab4" data-toggle="tab" role="tab" data-target="#Tab4" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 4</button>
</div>
<div class="tab-content" id="myContent" deprecated...>
<div class="tab-pane fade main-warning-bg-color" id="Tab1" tabindex="0" role="tabpanel" aria-labelledby="tab_Tab1" >
<p class="text-white">Contenu Tab 1</p>
</div>
<div class="tab-pane fade main-info-bg-color" id="Tab2" tabindex="0" role="tabpanel" aria-labelledby="tab_Tab2" >
<p class="text-white">Contenu Tab 2</p>
</div>
<div class="tab-pane fade show active main-success-bg-color" id="Tab3" tabindex="0" role="tabpanel" aria-labelledby="tab_Tab3" >
<p class="text-white">Contenu Tab 3</p>
</div>
<div class="tab-pane fade main-danger-bg-color" id="Tab4" tabindex="0" role="tabpanel" aria-labelledby="tab_Tab4" >
<p class="text-white">Contenu Tab 4</p>
</div>
</div>

Les paramètres

Macro cTabs: Nav, liste d'onglets

navigation ( bool / Défaut : true ) : Si true ajoute la balise "
..
" pour envelopper la liste des onglets et définir un menu. Si false ajoute une balide div avec le role "tablist" pour définir une liste d'onglets avec des contenus.
id ( text / default :'' ) : Identifiant unique
class ( text / Défaut : '' ) : Classe CSS.
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Nav à présenter à l'intérieur de la macro.

Macro cTab: Onglet

url ( text / Obligatoire ) : Lien '<a>' simple ou bouton '<button>' associé avec un hash '#nomdutab' lien vers le panel. Attention le paramétre navigation doit étre à "false"
id ( text / Défaut : '' ) : Identifiant unique.
active ( bool / Défaut : false ) : Si true ajoute la classe active et les propriétés ARIA.
navigation ( bool / Défaut : true ) : Si false ajoute les classes et les propriétés ARIA pour un onglet de "contenu".
disabled ( bool / Défaut : false ) : Si true désactive l'onglet.
class ( text / Défaut : '' ) : Class CSS.
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Nav à présenter à l'intérieur de la macro.

Macro cTabContent: Englobe les "panels"

id ( text /Obligatoire ) : Identifiant unique
class ( text / Défaut : '' ) : Classe CSS.
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Tab panel à présenter à l'intérieur de la macro.

Macro cTabPane: Panel

id active=false disabled=false class='' params=''

id ( text / obligatoire ) : Identifiant unique associé à l'onglet.
active ( bool / Défaut : false ) : Si true ajoute les classes show et active le panel.
disabled ( bool / Défaut : false ) : Si true désactive le panel et ajoute les propriétés ARIA.
class ( text / Défaut : '' ) : Class CSS.
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu du panel affiché en sélectionnant l'onglet "tab" correspondant.

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 : https://getbootstrap.com/docs/4.6/components/navs/#regarding-accessibility et https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role

Prévisualisation Style guide @cPagination [Nouvelle Fenêtre] Style guide responsive @cPagination [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Macro

<@cPagination paginator=pageList label='Liste des pages' />

Html

<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" focusable="false" >
<use xlink:href="#paris-icon-arrow-left"></use>
</svg>
</a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" title="1 - active" href="jsp/site/Portal.jsp?page_id=6#section-pagination">1<span class="sr-only"> - active</span></a>
</li>
<li class="page-item" >
<a class="page-link" title="2" href="jsp/site/Portal.jsp?page_id=6#section-pagination">2</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" focusable="false" >
<use xlink:href="#paris-icon-arrow-right"></use>
</svg>
</a>
</li>
</ul>
</nav>

Les paramètres

paginator ( list / Défaut : '' ) : Objet Paginator du core LUTECE ou liste avec comme attributs les url et index de pagination.
label ( text / Défaut : 'Pagination' ) : Titre du paginateur.
class ( text / Défaut : '' ) : Class CSS.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML

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.

Prévisualisation Style guide @cTable [Nouvelle Fenêtre] Style guide responsive @cTable [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Tableau avec collapse
Label 1	Label 2	Label 3
Col 1	Col 2	Col 3
Col 1	Col 2	Col 3
Col 1	Col 2	Col 3
Résumé Col 1	Résumé Col 2

Tableau avec thème
Label 1	Label 2
Col 1	Col 2	Modifier
Col 1	Col 2	Modifier
Col 1	Col 2	Modifier

Tableau avec style Bootstrap 4
Label 1	Label 2	Label 3	Label 4	Label 5	Label 6
Col 1	Col 2	Col 3	Col 4	Col 5	Col 6
Col 1	Col 2	Col 3	Col 4	Col 5	Col 6
Col 1	Col 2	Col 3	Col 4	Col 5	Col 6

Macro

 <@cTable>
 </@cTable>

Html

<div class="table-responsive">
<table class="table ctable xs-collapsed" >
<caption class="sr-only">Tableau avec collapse</caption>
<thead >
<tr >
<th scope="col" class="" >
Label 1</th>
<th scope="col" class="" >
Label 2</th>
<th scope="col" class="" >
Label 3</th>
</tr>
</thead>
<tbody >
<tr >
<td>
<span>Col 1</span>
</td>
<td>
<span>Col 2</span>
</td>
<td>
<span>Col 3</span>
</td>
</tr>
<tr >
<td>
<span>Col 1</span>
</td>
<td>
<span>Col 2</span>
</td>
<td>
<span>Col 3</span>
</td>
</tr>
<tr >
<td>
<span>Col 1</span>
</td>
<td>
<span>Col 2</span>
</td>
<td>
<span>Col 3</span>
</td>
</tr>
</tbody>
<tfoot >
<tr >
<td>
<span>Résumé Col 1</span>
</td>
<td>
<span>Résumé Col 2</span>
</td>
<td>
<span></span>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="table-responsive">
<table class="table ctable" >
<caption class="sr-only">Tableau avec thème</caption>
<thead >
<tr >
<th scope="col" class="" id="label-1" >
Label 1</th>
<th scope="col" class="" id="label-2" >
Label 2</th>
<th scope="col" class="" >
</th>
</tr>
</thead>
<tbody >
<tr >
<td headers="label-1">
<span>Col 1</span>
</td>
<td headers="label-2">
<span>Col 2</span>
</td>
<td class="button">
<span><!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-edit" focusable="false" >
<use xlink:href="#paris-icon-edit"></use>
</svg>
<span class="ml-2">Modifier</span>
</span>
</td>
</tr>
<tr >
<td>
<span>Col 1</span>
</td>
<td>
<span>Col 2</span>
</td>
<td class="button">
<span><!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-edit" focusable="false" >
<use xlink:href="#paris-icon-edit"></use>
</svg>
<span class="ml-2">Modifier</span>
</span>
</td>
</tr>
<tr >
<td>
<span>Col 1</span>
</td>
<td>
<span>Col 2</span>
</td>
<td class="button">
<span>
<svg class="paris-icon paris-icon-edit" id="Modifier" focusable="false" >
<use xlink:href="#paris-icon-edit"></use>
</svg>
<span class="ml-2">Modifier</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table" >
<caption class="sr-only">Tableau avec style Bootstrap 4</caption>
<thead >
<tr >
<th scope="col" class="" id="label-1" >
Label 1</th>
<th scope="col" class="" id="label-2" >
Label 2</th>
<th scope="col" class="" id="label-3" >
Label 3</th>
<th scope="col" class="" id="label-4" >
Label 4</th>
<th scope="col" class="" id="label-5" >
Label 5</th>
<th scope="col" class="" id="label-6" >
Label 6</th>
<th scope="col" class="" >
</th>
</tr>
</thead>
<tbody >
<tr >
<td headers="label-1">
<span>Col 1</span>
</td>
<td headers="label-2">
<span>Col 2</span>
</td>
<td headers="label-3">
<span>Col 3</span>
</td>
<td headers="label-4">
<span>Col 4</span>
</td>
<td headers="label-5">
<span>Col 5</span>
</td>
<td headers="label-6">
<span>Col 6</span>
</td>
</tr>
<tr >
<td>
<span>Col 1</span>
</td>
<td>
<span>Col 2</span>
</td>
<td>
<span>Col 3</span>
</td>
<td>
<span>Col 4</span>
</td>
<td>
<span>Col 5</span>
</td>
<td>
<span>Col 6</span>
</td>
</tr>
<tr >
<td>
<span>Col 1</span>
</td>
<td>
<span>Col 2</span>
</td>
<td>
<span>Col 3</span>
</td>
<td>
<span>Col 4</span>
</td>
<td>
<span>Col 5</span>
</td>
<td>
<span>Col 6</span>
</td>
</tr>
</tbody>
</table>
</div>

Elément Table

Les paramètres

caption ( text / '' ) : Titre "Caption" de la table
summary ( text / '' ) : Attribut "summary" de la table
breakpoint( text / Défaut : '' ) : Une valeur parmis -sm,-md,-lg,-xl,-xxl
themed( boolean / Défaut : true ) : Ajoute les style du thème par défaut sinon ce sont les styles de table de BS4 qui seront appliqués.
collapsible( boolean / Défaut : true ) : Par défaut pour les petits écran, seule la prmière cellule de la ligen 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.
id( text / Défaut : '' ) : Identifiant
class( text / Défaut : '' ) : Classe CSS
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la macro.

Elément Thead

Les paramètres

id( text / Défaut : '' ) : Identifiant
class( text / Défaut : '' ) : Classe CSS
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la macro.

Elément Tfoot

Les paramètres

id( text / Défaut : '' ) : Identifiant
class( text / Défaut : '' ) : Classe CSS
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la macro.

Elément Tbody

Les paramètres

id( text / Défaut : '' ) : Identifiant
class( text / Défaut : '' ) : Classe CSS
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la macro.

Elément Tr

Les paramètres

id( text / Défaut : '' ) : Identifiant
class( text / Défaut : '' ) : Classe CSS
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la macro.

Elément Th

Les paramètres

id( text / Défaut : '' ) : Identifiant
class( text / Défaut : '' ) : Classe CSS
role( text / Défaut : 'columnheader' ) : Rôle nécessaire pour l'accessibilité. Valeurs possibles columnheader ou rowheader
scope( text / Défaut : '' ) : Scope de la cellule, autres valeurs possibles col ou row
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la macro.

Elément Td

Les paramètres

id( text / Défaut : '' ) : Identifiant
class( text / Défaut : '' ) : Classe CSS
scope( text / Défaut : 'col' ) : Scope de la cellule, valeurs col ou row
headers( text / Défaut : '' ) : Cet attribut spécifie 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 actuelle
role( text / Défaut : '' ) : Role
colspan( text / Défaut : '' ) : Attribut "colspan"
nospan( bool / Défaut : false ) : Ajout du tag "span" dans le "td"
params ( text / default :'' ) : Tout autre attribut HTML
<#nested> : Contenu à présenté à l'intérieur de la macro.

Prévisualisation Style guide responsive @cForm [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Macro

 <@cForm>
    ...
 </@cForm>

Html

<form method="post">
...
</form>

Déclaration d'un formulaire

Les paramètres

class ( text / default : '' ) : Attribut classe. On peut ajouter autant de classe que possible séparées par un espace.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
name ( text / default :'' ) : Attribut "name"
method ( text / default :'post' / 'post' | 'get' ) : Attribut "Method"
role ( text / default :'' ) : Aria label for the form
action ( text / default : '' ) : Url d'action
#nested : Menu é présenter é l'intérieur de la macro.

cForm class='' id='' params='' name='' method='post' role='' action=''

Documentation Formulaires Bootstrap 4 Documentation Formulaires Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cFormRow [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Une ligne de Formulaire...

Macro

 <@cFormRow>
     <@cCol>
       <@cText>Une ligne de Formulaire...</@cText>
     </@cCol>
 </@cFormRow>

Html

<div class="form-row">
<div class="col ">
<p>
Une ligne de Formulaire... </p>
</div>
</div>

Agencement d'un formulaire : ligne et colonnes

Les paramètres

class ( text / default : '' ) : Nom de classe par défaut 'container'. En ajoutant '-fluid' on peut avoir un container sur toute la largeur de la page. On peut ajouter d'autres classe séparées par un espace.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
#nested : Menu é présenter é l'intérieur de la macro.

Documentation Formulaires Bootstrap 4 Documentation Formulaires Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cField [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Code de réduction Saisir un code de réduction

Macro

  <@cField label='Code de réduction' for='reduc' required=false>
     <@cInput name='reduc' placeholder='Exemple: A256' />
      <@cFormHelp id='reduc' label='Saisir un code de réduction' /> 
  </@cField>

Html

<div class="form-row">
<div class="col ">
<div class="form-group">
<label class="" for="reduc">
Code de réduction
</label>
<input type="text" class=" form-control" name="reduc" id="reduc" value="" placeholder="Exemple: A256">
<small id="help_reduc" class="form-text">Saisir un code de réduction</small>
</div>
</div>
</div>

Conteneur de champs de formulaire avec "form-group" et label. Pour être complet doit être utilisé avec la macro @cInput

Les paramètres

label ( text / default :'' ) : Libellé du champs
labelClass ( text / default :'' ) : Autre classe pour le libellé
labelData ( text / default :'' ) : Données supplémentaires que l'on peut ajouter en fin de libellé.
for ( text / default :'' ) : Lien entre le libellé et le champ, à répéter dans la macro @cInput
showLabel ( bool / default : true ) : Par défaut affiche le label, mais si false le label n'est pas affiché.
required ( bool / default : true ) : Indique si le champs est obligatoire, ajoute le libellé '(facultatif)' si false
class ( text / default : '' ) : On peut ajouter une ou des classe-s- séparées par un espace.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
#nested : Champs (macro @cInput ) à l'intérieur de la macro.

Documentation Formulaires Bootstrap 4 Documentation Formulaires Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cInput [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Nom Saisir mon nom

Prénom Saisir mon prénom

Nombre d'enfants

Informations Saisir une information

Date avec FlatPicker

Macro

 <@cFormRow class='mb-5'>
     <@cCol>
         <@cLabel label='Nom' for='name' />
         <@cInput name='name' type='text' value='Dupont' helpMsg='Saisir mon nom' />
     </@cCol>
 </@cFormRow> 
 <@cFormRow class='mb-5'>
     <@cCol>
         <@cLabel label='Prénom' for='name2' />
         <@cInput name='name2' type='text' placeholder='Exemple: Jean Yves' helpMsg='Saisir mon prénom' />
     </@cCol>
 </@cFormRow> 
 <@cFormRow class='mb-5'>
     <@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 class='mb-5'>
    <@cCol class='4'>
        <@cLabel label='Date avec DatePicker' for='datepicker' />
        <@cInputGroup>
            <@cInput id='datepicker' name='name3' value='02/01/2020' />
            <@cInputGroupAddon>
                <@cInputGroupAddonText tag='div'>
                    <@parisIcon 'calendar' 'Date' />
                </@cInputGroupAddonText>   
             </@cInputGroupAddon>
        </@cInputGroup>
     </@cCol>
 </@cFormRow> 
 <@initThemeDatePicker/>
 <@getThemeDatePicker idField='datepicker' language='fr' />

Html

<div class="form-row mb-5">
<div class="col ">
<label class="" for="name">
Nom
</label>
<input type="text" class=" form-control" name="name" id="name" value="Dupont" aria-describedby="help_name">
<small id="help_name" class="form-text">Saisir mon nom</small>
</div>
</div>
<div class="form-row mb-5">
<div class="col ">
<label class="" for="name">
Prénom
</label>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Jean Yves" aria-describedby="help_name">
<small id="help_name" class="form-text">Saisir mon prénom</small>
</div>
</div>
<div class="form-row mb-5">
<div class="col 3">
<label class="" for="nbd">
Nombre d'enfants
</label>
<input type="number" class=" form-control" name="nbd" id="nbd" value="0">
</div>
</div>
<div class="form-row mb-5">
<div class="col ">
<label class="" for="info" data-info="information">
Informations
</label>
<input type="text" class=" form-control" name="info" id="info" value="" placeholder="Exemple: Choisir une place" aria-describedby="help_info">
<small id="help_info" class="form-text">Saisir une information</small>
</div>
</div>
<div class="form-row mb-5">
<div class="col 4">
<label class="" for="datepicker">
Date avec FlatPicker
</label>
<div class="input-group">
<input type="text" class=" form-control" name="name3" id="datepickerflat" value="2024-06-21">
<div class="input-group-append">
<div class="input-group-text">
<svg class="paris-icon paris-icon-calendar" id="Date" focusable="false" >
<use xlink:href="#paris-icon-calendar"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function (){
let showFormatdatepickerflat = getFlatPickerDateFormat( browserCurrentLocale );
let dtFormatdatepickerflat='Y-m-d H:i:S'; // Default for most DB
flatpickr("#datepickerflat", {
allowInput : true,
mode : "single",
enableTime : false,
altInput : true,
altFormat : showFormatdatepickerflat,
dateFormat : dtFormatdatepickerflat,
"locale" : browserLang,
prevArrow : '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="15 6 9 12 15 18"></polyline></svg>',
nextArrow : '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="9 6 15 12 9 18"></polyline></svg>',
onDayCreate: function (dObj, dStr, fp, dayElem) {
dayElem.setAttribute('role','button');
}
// ! Range usage error -> Missing id (rangeidField param) for end range field
});
});
</script>

Champs

Les paramètres

name ( text / obligatoire ) : Attribut name du champs
class ( text / default : 'form-control' ) : On peut ajouter une ou des classe-s- séparées par un espace. Attention il faut ajouter 'form-control' si vous modifier les classes.
id ( text / default :'' ) : Identifiant unique, égal é l'attribut name si non renseigné
type ( text / default :'text' ) : Tout type de champs password, date, hidden...
value ( text / default :'text' ) : Valeur par défaut
placeholder ( text / default :'text' ) : Exemple de valeur présenté dans l'attribut placeholder
required ( bool / default : false ) : Indique si le champs est obligatoire.
disabled ( bool / default : false ) : Indique si le champs est désactivé.
readonly ( bool / default : false ) : Indique si le champs est en lecture seule.
pattern ( text / default : '' ) : Permet de saisir une expression réguliére pour contréler le champs
accept ( text / default : '' ) : Texte de l'attribut accept pour les type de fichiers
title ( text / default : '' ) : Texte de l'attribut title
maxlength ( int / default : 0 ) : Permet de saisir une limitation de taille de valeur saisie
min ( int / default : 0 ) : Permet de saisir une valeur minimale pour les champs de type number
max ( int / default : 0 ) : Permet de saisir une valeur maximale pour les champs de type number
helpMsg ( text / default :'' ) : Message d'aide
errorMsg ( text / default :'' ) : Message d'erreur.
params ( text / default :'' ) : Tout autre attribut HTML

Documentation Formulaires Bootstrap 4 Documentation Formulaires Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cLabel [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Mot de Passe

Macro

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

Html

<div class="form-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>

Libellé d'un champ

Les paramètres

label ( text / obligatoire) : Label du champ.
class ( text / default : '' ) : On peut ajouter une ou des classe-s- séparées par un espace.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
for ( text / default :'' ) : Lien entre le libellé et le champ, é répéter dans la macro @cInput
showLabel ( bool / default : true ) : Par défaut affiche le label, mais si false le label n'est pas affiché.
required ( bool / default : true ) : Indique si le champs est obligatoire, ajoute le libellé '(facultatif)' si false

Prévisualisation Style guide responsive @cFormHelp [Nouvelle Fenêtre]

Aide

Macro

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

Html

<div class="form-row">
<div class="col ">
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Jean Yves">
<small id="help_field" class="form-text">Aide</small>
</div>
</div>

Aide sur les champs

Les paramètres

id ( text / obligatoire ) : Identifiant unique correspondant au champs afférent
label ( text / obligatoire ) : Libellé d'aide pour un champ
class ( text / default :'' ) : Saisir une classe
params ( text / default :'' ) : Tout autre attribut HTML

Prévisualisation Style guide responsive @cFormError [Nouvelle Fenêtre]

Erreur

Macro

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

Html

<div class="form-row">
<div class="col ">
<input type="text" class=" form-control" name="name" id="formError" value="" placeholder="Exemple: Jean Yves">
<div class="invalid-feedback" role="alert" id="error_field">Erreur</div>
</div>
</div>

Aide sur les champs

Les paramètres

id ( text / obligatoire ) : Identifiant unique correspondant au champs afférent
label ( text / obligatoire ) : Libellé d'aide pour un champ
class ( text / default :'' ) : Saisir une classe
params ( text / default :'' ) : Tout autre attribut HTML

Prévisualisation Style guide responsive @cInputGroup [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Tarif

€

Date (type date)

Mot de passe

8 caractères une majuscule un chiffre

Macro

<@cFormRow class='mb-5'>
    <@cCol class='2'>
        <@cLabel label='Tarif' for='tarif' />
        <@cInputGroup>
            <@cInput name='tarif' value='15' />
            <@cInputGroupAddon addonText='&euro;' />
        </@cInputGroup>
     </@cCol>
 </@cFormRow> 
 <@cFormRow class='mb-5'>
    <@cCol class='3'>
        <@cLabel label='Nombre de ...' for='nbd' />
        <@cInput type="number" name='nbd' value='15' />
     </@cCol>
 </@cFormRow> 
 <@cFormRow class='mb-5'>
    <@cCol class='4'>
        <@cLabel label='Date (type date)' for='date' />
        <@cInputGroup>
            <@cInput type='date' name='date' value='02/01/2020' />
            <@cInputGroupAddon>
                <@cInputGroupAddonText tag='div'>
                    <@parisIcon 'calendar' 'Date' />
                </@cInputGroupAddonText>    
            </@cInputGroupAddon>
        </@cInputGroup>
     </@cCol>
 </@cFormRow> 
 <@cFormRow>
    <@cCol class='8'>
        <@cLabel label='Mot de passe' for='pass' />
        <@cInputGroup>
            <@cInput name='pass' type='password' value='Ajoho56' />
            <@cInputGroupAddon class='toggle-password'>
                <@cInputGroupAddonText tag='div'>
                    <@parisIcon 'eye' 'Mot de Passe' />
                </@cInputGroupAddonText>
            </@cInputGroupAddon>
        </@cInputGroup>
        <@cPasswordCheck id='pass' />
     </@cCol>
 </@cFormRow>

Html

<div class="form-row mb-5">
<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">
<div class="input-group-append">
<span class="input-group-text">
&euro;</span>
</div>
</div>
</div>
</div>
<div class="form-row mb-5">
<div class="col 4">
<label class="" for="date">
Date (type date)
</label>
<div class="input-group">
<input type="date" class=" form-control" name="date" id="date" value="02/01/2020">
<div class="input-group-append">
<div class="input-group-text">
<svg class="paris-icon paris-icon-calendar" id="Date" focusable="false" >
<use xlink:href="#paris-icon-calendar"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col 8">
<label class="" for="pass">
Mot de passe
</label>
<div class="input-group">
<input type="password" class=" form-control" name="pass" id="pass" value="Ajoho56">
<div class="input-group-append toggle-password">
<div class="input-group-text">
<svg class="paris-icon paris-icon-eye" id="Mot de Passe" focusable="false" >
<use xlink:href="#paris-icon-eye"></use>
</svg>
</div>
</div>
</div>
<small id="help_pass" class="form-text"><span class="charlength"><i class="fa fa-check"></i> 8 caractères</span> <span class="uppercase"><i class="fa fa-check"></i> une majuscule </span> <span class="digit"><i class="fa fa-check"></i> un chiffre</span></small>
</div>
</div>

Champs avec information supplémentaire

Les paramètres

class ( text / default : '' ) : On peut ajouter une ou des classe-s- séparées par un espace.
id ( text / default :'' ) : Identifiant unique, égal é l'attribut name si non renseigné
params ( text / default :'' ) : Tout autre attribut HTML

Prévisualisation Style guide responsive @getThemeDatePicker [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Date avec FlatPicker

Macro

 <@cFormRow class='mb-5'>
    <@cCol class='4'>
        <@cLabel label='Date avec DatePicker' for='datepicker' />
        <@cInputGroup>
            <@cInput id='datepicker' name='name3' value='02/01/2020' />
            <@cInputGroupAddon>
                <@cInputGroupAddonText tag='div'>
                    <@parisIcon 'calendar' 'Date' />
                </@cInputGroupAddonText>   
             </@cInputGroupAddon>
        </@cInputGroup>
     </@cCol>
 </@cFormRow> 
 <@initThemeDatePicker/>
 <@getThemeDatePicker idField='datepicker' language='fr' />

Html

<div class="form-row mb-5">
<div class="col 4">
<label class="" for="datepicker">
Date avec FlatPicker
</label>
<div class="input-group">
<input type="text" class=" form-control" name="name3" id="datepickerflat" value="2024-06-21">
<div class="input-group-append">
<div class="input-group-text">
<svg class="paris-icon paris-icon-calendar" id="Date" focusable="false" >
<use xlink:href="#paris-icon-calendar"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function (){
let showFormatdatepickerflat = getFlatPickerDateFormat( browserCurrentLocale );
let dtFormatdatepickerflat='Y-m-d H:i:S'; // Default for most DB
flatpickr("#datepickerflat", {
allowInput : true,
mode : "single",
enableTime : false,
altInput : true,
altFormat : showFormatdatepickerflat,
dateFormat : dtFormatdatepickerflat,
"locale" : browserLang,
prevArrow : '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="15 6 9 12 15 18"></polyline></svg>',
nextArrow : '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="9 6 15 12 9 18"></polyline></svg>',
onDayCreate: function (dObj, dStr, fp, dayElem) {
dayElem.setAttribute('role','button');
}
// ! Range usage error -> Missing id (rangeidField param) for end range field
});
});
</script>

Champs avec datpicker

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 flatPicker avec l'input dont l'id est passé en paramètre -idField-

Les paramètres de <@getThemeDatePicker idField='datepickerflat' />

idField ( text / obligatoire) : Identifiant unique
showFormat ( text / default :'' ) : Format d'affichage de type 'dd/mm/yyyy' voir la doc flatpickr
mindate ( text / default : '' ) : Date minimum sélectionnable le datepicker
maxdate ( text / default : '' ) : Date maximum sélectionnable le datepicker
defaultDate ( text / default : '' ) : Date sélectionnée par défaut dans le datepicker
mode ( text / default :'single' ) : Valeur par défaut
time ( bool / default : false ) : Indique si le champs est en lecture seule.
maxlength ( int / default : 0 ) : Permet de saisir une limitation de taille de valeur saisie
range ( text / default :'' ) : Message d'aide
rangeIdField ( text / obligatoire ) : Identifiant unique, égal
customArrows ( Array / default : '[\'\',\'\'] :Flèches en SVG

Documentation Formulaires Bootstrap 4 Documentation Formulaires Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cInputDropFiles [Nouvelle Fenêtre]

Attention

Cette macro nécessite le plugin AsynchronousUpload pour fonctionner !

Zone de drop de fichiers

Justificatif de domicile

Upload de fichiers

Glissez vos documents ici
ou Sélectionner

Zone + liste de fichiers upload

Justificatif de domicile

Upload de fichiers

Glissez vos documents ici
ou Sélectionner

Fichier(s) envoyé(s)

Mon attestation.docx
3 Ko

Justificatif.docx
60 o

Macro

 <@cFormRow>
   <@cCol>
       <@cLabel label='Nom' for='name4' />
       <@cInput name='name4' type='text' value='Dupont' helpMsg='Saisir votre nom' />
   </@cCol>
 </@cFormRow>
<@cFormRow class='mb-5'>
    <@cCol>
        <p class="lead main-info-color">Zone de drop de fichiers</p>
    </@cCol>
</@cFormRow>
<@cFormRow class='mb-5'>
    <@cCol>
        <@cField label='Justificatif de domicile' for='domicile' required=false>
            <@cInputDropFiles name='files_domicile' />
        </@cField>		
	</@cCol>
</@cFormRow>
<@cFormRow class='mb-5'>
    <@cCol>
        <p class="lead main-info-color">Zone + liste de fichiers upload</p>
    </@cCol>
</@cFormRow>
<@cFormRow class='mb-5'>
    <@cCol>
       <@cField label='Justificatif de domicile' for='domicile' required=false>
            <@cInputDropFiles name='files_domicile' hasFiles=true >
               <@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>

Html

<div class="alert alert-outline alert-warning" role="alert">
<div class="alert-icon">
<div class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-warning" focusable="false" >
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
</div>
</div>
<div class="alert-text">
<div class="alert-title">Attention</div>
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 !
<!-- Si vous utilisez une librairie autre que JQuery FileUpload inclue dans le plugin, il vous faudra modifier le HTML et ajouter le javascript nécessaire. -->
</div>
</div>
<link rel="stylesheet" href="css/plugins/asynchronousupload/jquery.fileupload.css" />
<link rel="stylesheet" href="css/plugins/asynchronousupload/jquery.fileupload-ui.css" />
<script src="js/plugins/asynchronousupload/load-image.all.min.js" ></script>
<script src="js/plugins/asynchronousupload/vendor/promise-polyfill.js" ></script>
<script src="js/plugins/asynchronousupload/vendor/jquery.ui.widget.js" ></script>
<script src="js/plugins/asynchronousupload/jquery.iframe-transport.js" ></script>
<script src="js/plugins/asynchronousupload/jquery.fileupload.js" ></script>
<script src="js/plugins/asynchronousupload/jquery.fileupload-ui.js" ></script>
<script src="js/plugins/asynchronousupload/jquery.fileupload-process.js" ></script>
<script src="js/plugins/asynchronousupload/vendor/canvas-to-blob.js"></script>
<script src="js/plugins/asynchronousupload/config.js"></script>
<script src="js/plugins/asynchronousupload/jquery.fileupload-image.js" ></script>
<script src="js/plugins/asynchronousupload/jquery.fileupload-validate.js" ></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="form-row mb-5">
<div class="col ">
<p class="lead main-info-color">Zone de drop de fichiers</p>
</div>
</div>
<div class="form-row mb-5">
<div class="col ">
<div class="form-group">
<label class="" for="domicile">
Justificatif de domicile
</label>
<input type="hidden" name="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="form-row group-files">
<div class="col">
<label id="lbdomicile" for="domicile">Upload de fichiers</label>
<div class="file-input ">
<input type="file" class="form-control my-1 formsAsynchronousUploadHandler" name="files_domicile" id="domicile" multiple="multiple" data-nof="1">
<p>
<svg class="paris-icon paris-icon-upload" role="img" aria-labelledby="paris-icon-title-group" focusable="false">
<title id="paris-icon-title-group">Sélectionner</title>
<use xlink:href="#paris-icon-upload"></use>
</svg>
</p>
<p class="text-uppercase">Glissez vos documents ici ou  Sélectionner</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-group" style="display:none;" id="_file_deletion_label_domicile">
<label>Fichier(s) envoyé(s)</label>
<div id="_file_deletion_domicile" class="col py-2 pl-0 files-group">
</div>
</div>
</div>
</div>
<script>
$( function(){
mapFilesNumber.set( "domicile", 1 );
$('#domicile').fileupload( {dropZone: $('#domicile')});
});
</script>
</div>
</div>
</div>
<div class="form-row mb-5">
<div class="col ">
<p class="lead main-info-color">Zone + liste de fichiers upload</p>
</div>
</div>
<div class="form-row mb-5">
<div class="col ">
<div class="form-group">
<label class="" for="domicile2">
Justificatif de domicile
</label>
<input type="hidden" name="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="form-row group-files">
<div class="col">
<label id="lbdomicile2" for="domicile2">Upload de fichiers</label>
<div class="file-input ">
<input type="file" class="form-control my-1 formsAsynchronousUploadHandler" name="files_domicile2" id="domicile2" multiple="multiple" data-nof="1">
<p>
<svg class="paris-icon paris-icon-upload" role="img" aria-labelledby="paris-icon-title-group" focusable="false">
<title id="paris-icon-title-group">Sélectionner</title>
<use xlink:href="#paris-icon-upload"></use>
</svg>
</p>
<p class="text-uppercase">Glissez vos documents ici ou  Sélectionner</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-group" id="_file_deletion_label_domicile2">
<label>Fichier(s) envoyé(s)</label>
<div id="_file_deletion_domicile2" class="col py-2 pl-0 files-group">
<div 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">
<a class="files-item-link" title="Mon attestation.docx" href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_1&field_index=1&fileName=Mon attestation.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" data-type="DOCX" data-img="">
<span>Mon attestation.docx</span>
</a>
<br>
<small>3 Ko</small>
</label>
<a href="#" class="text-danger deleteSingleFile" fieldname="file_Upload_1" handlername="formsAsynchronousUploadHandler" index="1">
<i class="fa fa-times fa-fw"></i>
</a>
</div>
<div 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">
<a class="files-item-link" title="Justificatif.docx" href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_2&field_index=1&fileName=Justificatif.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" data-type="DOCX" data-img="">
<span>Justificatif.docx</span>
</a>
<br>
<small>60 o</small>
</label>
<a href="#" class="text-danger deleteSingleFile" fieldname="file_Upload_2" handlername="formsAsynchronousUploadHandler" index="1">
<i class="fa fa-times fa-fw"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<script>
$( function(){
mapFilesNumber.set( "domicile2", 1 );
$('#domicile2').fileupload( {dropZone: $('#domicile2')});
});
</script>
</div>
</div>
</div>

Champs de type Fichiers

Les paramètres

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 ( text / obligatoire ) : Attribut name du champs
handler ( json/text / {} ) : Handler pour les champs
type ( text / 'dropzone' / 'dropzone' | 'button' ) : Type d'upload par défaut 'dropzone', zone d'upload ou sinon 'button'.
nbFiles ( number / default : 1 )Modifie l'affichage en fonction du nombre de fichiers.
showAllFilesBtn ( number / default : 1 )Affiche le bouton "Selectionner tous les fichier si 1. Si 0 masque le bouton
nbCol ( number / default : 1 )Modifie l'affichage en 1 ou X colonnes
maxFileSize ( number / default : 0 )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 ( text / default : '' ) : Unité de poids choisie par exemple "Mo"
accept ( liste text / default : '' ) : Format-s- de fichier accepté-s-.
label ( text / default : 'Upload de fichiers' ) : Titre de la zone d'upload des fichiers
showLabel ( number / default : '' ) : Affiche ou pas le titre de la zone d'upload
labelPos ( number / default : 1 ) : Zone d'affichage du label, par défaut dans la prémière colonne.
labelSelect ( text / default : 'Sélectionner' ) : "Supprimer" valeur définie dans le fichier "themeparisfr_messages_fr.properties".
labelSubmit ( text / default : 'Transmettre' ) : "Sélectionner" valeur définie dans le fichier "themeparisfr_messages_fr.properties".
labelDelete ( text / default : 'Supprimer' ) : "Transmettre" valeur définie dans le fichier "themeparisfr_messages_fr.properties".
required ( bool / default : false ) : Indique si le champs est obligatoire.
disabled ( bool / default : false ) : Indique si le champs est désactivé.
multiple ( bool / default : true ) : Ajoute l'attribut "multiple" au champs d'upload.
noJs ( bool / default : false ) : Ajoute l'attribut "nojs" au bouton de suppression multiple.
helpMsg ( text / default :'' ) : Message d'aide
hasFiles ( bool / default : false ) : Si true affiche la liste de fichiers.
errorMsg ( text / default :'' ) : Message d'erreur.
id ( text / default :'' ) : Identifiant unique, égal é l'attribut name si non renseigné
class ( text / default : '' ) : On peut ajouter une ou des classe-s- séparées par un espace.
params ( text / default :'' ) : Tout autre attribut HTML

Prévisualisation Style guide responsive @cRadio [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Yes or No ?

Yes

Radio Help

Ok or Nok ?

Nok

Radio Ok Nok Help

Macro

 <@cFormRow>
   <@cCol params='aria-describedby="radioHelp"'>
      <@cField label='Yes or No ?' >
         <@cRadio name='yesno' id='rYes' label='Oui' />
         <@cRadio name='yesno' id='rNo' label='Non' />
      <@cFormHelp id='radioHelp' label='Radio Yes No Help' /> 
      </@cField>
    </@cCol>
 </@cFormRow>
 <@cFormRow>
   <@cCol params='aria-describedby="radioHelp"'>
      <@cFormRow>
         <@cCol>
             <@cRadio name='oknok' id='rOk' label='Oui' inline=true />
             <@cRadio name='oknok' id='rNok' label='Non' inline=true />
             <@cFormHelp id='radioHelp2' label='Radio Ok Nok Help' /> 
         </@cCol>
      </@cFormRow>
    </@cCol>
 </@cFormRow>

Html

<div class="form-row">
<div class="col " aria-describedby="radioHelp2">
<div class="form-group">
<label class="">
Yes or No ?
</label>
<!-- Inline -->
<div class="custom-control custom-radio">
<input type="radio" id="rRadio0-333827" name="rRadio" class="custom-control-input" value="1">
<label class="custom-control-label" for="rRadio0-333827">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="rRadio0-012534" name="rRadio" class="custom-control-input" value="2">
<label class="custom-control-label" for="rRadio0-012534">No</label>
</div>
<small id="help_radioHelp" class="form-text">Radio Help</small>
</div>
</div>
</div>
<div class="form-row">
<div class="col " aria-describedby="radioHelp2">
<!-- Column -->
<label class="">
Ok or Nok ?
</label>
<div class="form-row">
<div class="col ">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="ok" name="oknok" class="custom-control-input" value="1">
<label class="custom-control-label" for="ok">Ok</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="nok" name="oknok" class="custom-control-input" value="2">
<label class="custom-control-label" for="nok">Nok</label>
</div>
<small id="help_radioHelp2" class="form-text">Radio Ok Nok Help</small>
</div>
</div>
</div>
</div>

Bouton radio

Les paramètres

name ( text / obligatoire ) : Attribut name du radio
label ( text / obligatoire ) : Libellé du radio
type ( text / 'radio' / 'radio' | 'button' ) : Par défaut prend l'aspect d'un radio, si "button" prend l'apsect d'un bouton
class ( text / default :'' ) : Attribut class
id ( text / default :'' ) : Identifiant unique, égal é l'attribut name si non renseigné
value ( text / default :'text' ) : Valeur par défaut
params ( text / default :'' ) : Tout autre attribut HTML
inline ( bool / default : false ) : Indique si le radio est présenté sur une ligne.
disabled ( bool / default : false ) : Indique si le radio est désactivé.
readonly ( bool / default : false ) : Indique si le radio est en lecture seule.
checked ( bool / default : false ) : Indique si le radio est sélectionné.
required ( bool / default : false ) : Indique si le radio est obligatoire.

Documentation Formulaires Bootstrap 4 Documentation Formulaires Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cCheckbox [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Horaire

Football

Judo

Natation

Tennis

Choisir un horaire

Macro

 <@cFormRow>
   <@cCol params='aria-describedby="radioHelp"'>
      <@cField label='Yes or No ?' >
         <@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' />
         <@cFormHelp id='radioHelp' label='Aide sur le bloc checkbox' /> 
      </@cField>
    </@cCol>
 </@cFormRow>

Html

<div class="form-row">
<div class="col " aria-describedby="radioHelp2">
<div class="form-group">
<label class="">
Horaire
</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="football" name="sport" class="custom-control-input" value="foot">
<label class="custom-control-label" for="football">Football</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="judo" name="sport" class="custom-control-input" value="judo">
<label class="custom-control-label" for="judo">Judo</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="natation" name="sport" class="custom-control-input" value="nata">
<label class="custom-control-label" for="natation">Natation</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="tennis" name="sport" class="custom-control-input" value="tenn">
<label class="custom-control-label" for="tennis">Tennis</label>
</div>
<small id="help_radioHelp2" class="form-text">Choisir un horaire</small>
</div>
</div>
</div>

Checkbox

Les paramètres

name ( text / obligatoire ) : Attribut name du radio
label ( text / obligatoire ) : Libellé associé é la valeur
type ( text / 'radio' / 'checkbox' | 'button' ) : Par défaut prend l'aspect d'une checkbox, si "button" prend l'apsect d'un bouton
class ( text / default :'custom-checkbox' ) : Attribut class
id ( text / default :'' ) : Identifiant unique, égal é l'attribut name si non renseigné
value ( text / default :'text' ) : Valeur par défaut
params ( text / default :'' ) : Tout autre attribut HTML
inline ( bool / default : false ) : Indique si le radio est présenté sur une ligne.
disabled ( bool / default : false ) : Indique si le radio est désactivé.
readonly ( bool / default : false ) : Indique si le radio est en lecture seule.
checked ( bool / default : false ) : Indique si le radio est sélectionné.
required ( bool / default : false ) : Indique si le radio est obligatoire.

Documentation Formulaires Bootstrap 4 Documentation Formulaires Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cSelect [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Commune Aide Combo Box

Commune

Catégories Aide OptGroup

Macro

 <@cFormRow>
   <@cCol params='aria-describedby="cSelect"'>
        <@cField label='Commune'>
            <@cSelect name='commune' multiple=true>
                <@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>
            <@cFormHelp id='cSelect' label='Aide Combo Box' /> 
        </@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 params='aria-describedby="cOptGroup"'>
        <@cField label='Catégories'>
            <@cSelect name=''>
                <@cOption label='' value='0' />
               <@cOptgroup label='Catégories 1'>
                    <@cOption label='Item 1 1' value='11' />
                    <@cOption label='Item 1 2' value='12' />
                    <@cOption label='Item 1 3' value='13' />
                </@cOptgroup>
                <@cOptgroup label='Catégories 2'>
                    <@cOption label='Item 2 1' value='21' />
                    <@cOption label='Item 2 2' value='22' />
                    <@cOption label='Item 2 3' value='23' />
                </@cOptgroup>
           </@cSelect>
            <@cFormHelp id='cOptGroup' label='Aide OptGroup' /> 
        </@cField>
    </@cCol>
</@cFormRow>

Html

<div class="form-row">
<div class="col " aria-describedby="cSelect">
<div class="form-group">
<label class="">
Commune
</label>
<select name="commune" class="form-control custom-select" multiple>
<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>
<small id="help_cSelect" class="form-text">Aide Combo Box</small>
</div>
</div>
</div>
<div class="form-row mt-3">
<div class="col ">
<div class="form-group">
<label class="">
Commune
</label>
<select name="" class="form-control custom-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="form-row mt-3">
<div class="col " aria-describedby="cOptGroup">
<div class="form-group">
<label class="">
Catégories
</label>
<select name="" class="form-control custom-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>
<small id="help_cOptGroup" class="form-text">Aide OptGroup</small>
</div>
</div>
</div>

cSelect

Les paramètres

name ( text / obligatoire ) : Attribut name du radio
class ( text / default :'custom-select' ) : Attribut class
id ( text / default :'' ) : Identifiant unique, égal é l'attribut name si non renseigné
params ( text / default :'listbox' ) : Attribut aria
multiple ( bool / default : false ) : Indique si le radio est présenté sur une ligne.
disabled ( bool / default : false ) : Indique si le radio est désactivé.
readonly ( bool / default : false ) : Indique si le radio est en lecture seule.
checked ( bool / default : false ) : Indique si le radio est sélectionné.
required ( bool / default : false ) : Indique si le radio est obligatoire.
helpMsg ( text / default :'' ) : Message d'aide
errorMsg ( text / default :'' ) : Message d'erreur.

Documentation Formulaires Bootstrap 4 Documentation Formulaires Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cBtn [Nouvelle Fenêtre]

Macro

<p>
<@cBtn label='btn-action' class='action m-1' />
<@cBtn label='btn-link-action' class='link-action m-1' />
<@cBtn label='btn-link-action' class='outline-action m-1' />
<@cBtn label='btn-primary btn-more' class='link-action btn-more m-1' />
<@cBtn label='btn-primary btn-more' class='link-action btn-more m-1' disabled=true />
<@cBtn label='btn-link-primary' class='primary m-1' />
<@cBtn label='btn-outline' class='outline m-1' />
</p>
<p>
 <@cBtn label='Annuler' class='link-action m-1'>
   <@cIcon label='Annuler' class='undo' />
 </@cBtn>
</p>
<p>
 <@cBtn label='Valider' class='action m-1'>
   <@cIcon label='Valider' class='check' />
 </@cBtn>
 <@cBtn label='Appliquer' class='action m-1'>
   <@cIcon label='Appliquer' class='check' />
 </@cBtn>
 <@cBtn label='Annuler' class='link-action m-1'>
   <@cIcon label='Annuler' class='undo' />
 </@cBtn>
</p>

Html

<p>
<button class="btn btn-action m-1" type="submit">
<span class="btn-label">btn-action</span>
</button>
<button class="btn btn-link-action m-1" type="submit">
<span class="btn-label">btn-link-action</span>
</button>
<button class="btn btn-outline-action m-1" type="submit">
<span class="btn-label">btn-outline-action</span>
</button>
<button class="btn btn-link-action btn-more m-1" type="submit">
<span class="btn-label">btn-link-action btn-more</span>
</button>
<button class="btn btn-link-action btn-more m-1" type="submit" disabled>
<span class="btn-label">btn-link-action btn-more</span>
</button>
<button class="btn btn-primary m-1" type="submit">
<span class="btn-label">btn-primary</span>
</button>
<button class="btn btn-link-primary m-1" type="submit">
<span class="btn-label">btn-link-primary</span>
</button>
<button class="btn btn-outline m-1" type="submit">
<span class="btn-label">btn-outline</span>
</button>
</p>
</p>
<button class="btn btn-link-action m-1" type="submit">
<span class="fas fa-undo" title="Annuler" aria-hidden="true" >
</span>
<span class="btn-label">Annuler</span>
</button>
</p>
<p>
<button class="btn btn-action m-1" type="submit">
<span class="fas fa-check" title="Valider" aria-hidden="true" >
</span>
<span class="btn-label">Valider</span>
</button>
<button class="btn btn-action m-1" type="submit" disabled>
<span class="fas fa-check" title="Appliquer" aria-hidden="true" >
</span>
<span class="btn-label">Appliquer</span>
</button>
<button class="btn btn-link-action m-1" type="submit">
<span class="fas fa-undo" title="Annuler" aria-hidden="true" >
</span>
<span class="btn-label">Annuler</span>
</button>
</p>

Boutons

Les paramètres

label ( text / obligatoire ) : Libellé du bouton
class ( text / default : '' ) : Nom de classe par défaut 'container'. En ajoutant '-fluid' on peut avoir un container sur toute la largeur de la page. On peut ajouter d'autres classe séparées par un espace.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
type ( text / default :'submit' / 'submit' | 'button' | 'reset' ) : Par défaut submit, sinon tout autre attribut HTML valide.
nestedpos ( text / default :'before' ) : Contenu de la macro est placé avant avec la valeur par défaut before ou aprés avec la valeur after
disabled ( bool / default : false ) : Indique si le bouton est désactivé.
#nested : Contenu à présenter à l'intérieur de la macro.

Documentation Bootstrap 4 Documentation Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cBtnImg [Nouvelle Fenêtre]

Macro

<p>
    <@cBtnImg src='images/fc_avatar.png' title='France Connect' >
        <strong>Calculer mon tarif avec</strong>
        <span>FranceConnect</span>
    </br@cBtnImg>
</p>
<p>
    <@cBtnImg src='images/fc_avatar.png' title='France Connect' >
        <strong>Calculer mon tarif avec</strong>
        <span>FranceConnect</span>
    </@cBtnImg>
</p>
<p>
    <@cBtnImg src='images/feed.png' title='France Connect' class='link-action' imgPos='after'>
        Actualités - Flux RSS
    </@cBtnImg>
</p>

Html

<p>
<button class="btn btn-action text-left btn-img" type="submit">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/fc_avatar.png" alt="" class="img-fluid">
<span>
<strong>Calculer mon tarif avec</strong><br>
<span>FranceConnect</span>
</span>
</button>
<p>
<p>
<button class="btn btn-primary btn-img" type="submit">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/fc_avatar.png" alt="" class="img-fluid">
<span>
<strong>Calculer mon tarif avec</strong>
<span>FranceConnect</span>
</span>
</button>
<p>
<p>
<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>
<p>

Boutons avec image

Les paramètres

src ( text / obligatoire ) : Url de l'image du bouton
title ( text / obligatoire ) : Titre pour le bouton
class ( text / default : 'action' ) : Nom de classe par défaut 'action'. On peut ajouter d'autres classe séparées par un espace.
id ( text / default :'' ) : Identifiant unique
type ( text / default :'submit' / 'submit' | 'button' | 'reset' ) : Par défaut submit, sinon tout autre attribut HTML valide.
params ( text / default :'' ) : Tout autre attribut HTML
imgPos ( text / default :'before' ) : L'image est placée avant avec la valeur par défaut before ou aprés avec la valeur after
disabled ( bool / default : false ) : Indique si le bouton est désactivé.
#nested : Contenu à présenter à l'intérieur de la macro.

Documentation Bootstrap 4 Documentation Bootstrap 4 [Nouvelle Fenêtre]

Prévisualisation Style guide responsive @cBtnGroup [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Macro

  <@cBtnGroup label='Menu Accueil Droit' >
    <@cBtn label='A' class='secondary' />
    <@cBtn label='B' class='secondary' />
    <@cBtn label='C' class='secondary' />
  <@cBtnGroup>
  <@cBtnGroup label='Menu Accueil Droit' >
    <@cBtn label='Réactif' class='outline' />
    <@cBtn label='Actif' class='outline active' />
  <@cBtnGroup>

Html

<p>
<div class="btn-group" role="group" aria-label="Menu Accueil">
<button class="btn btn-secondary" type="submit">
<span class="btn-label">A</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label">B</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label">C</span>
</button>
</div>
</p>
<p>
<div class="btn-group" role="group" aria-label="Menu Accueil">
<button class="btn btn-outline" type="submit">
<span class="btn-label">Réactif</span>
</button>
<button class="btn btn-outline active" type="submit">
<span class="btn-label">Actif</span>
</button>
</div>

Groupe de bouton

Les paramètres

label ( text / obligatoire ) : Libellé du group de bouton, accessibilité
class ( text / default : '' ) : Nom de classe par défaut 'btn-group'.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML.
type ( text / default :'' ) : Par défaut '', sinon avec la valeur vertical affiche le group de bouton verticalement.
#nested : Contenu à présenter à l'intérieur de la macro.

Prévisualisation Style guide responsive @cBtnToolbar [Nouvelle Fenêtre] Documentation Bootstrap 4 [Nouvelle Fenêtre]

Macro

<@cBtnToolbar label='Menu Accueil' class='d-flex justify-content-between'>
  <@cBtnGroup label='Menu Accueil Droit' >
    <@cBtn label='A' class='secondary' />
    <@cBtn label='B' class='secondary' />
    <@cBtn label='C' class='secondary' />
  <@cBtnGroup>
  <@cBtnGroup label='Menu Accueil Droit' >
    <@cBtn label='Réactif' class='outline' />
    <@cBtn label='Actif' class='outline active' />
  <@cBtnGroup>
<@cBtnToolbar>

Html

<div class="btn-toolbar d-flex justify-content-around" role="toolbar" aria-label="Menu Accueil">
<div class="btn-group" role="group" aria-label="Menu Accueil Droit">
<button class="btn btn-secondary" type="submit">
<span class="btn-label">A</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label">B</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label">C</span>
</button>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Droit">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label">D</span>
</button>
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label">E</span>
</button>
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label">F</span>
</button>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Gauche">
<button class="btn btn-outline" type="submit">
<span class="btn-label">Réactif</span>
</button>
<button class="btn btn-outline active" type="submit">
<span class="btn-label">Actif</span>
</button>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Gauche">
<button class="btn btn-outline" type="submit" disabled>
<span class="btn-label">Réactif</span>
</button>
<button class="btn btn-outline active" type="submit" disabled>
<span class="btn-label">Actif</span>
</button>
</div>
</div>

Etape

Les paramètres

label ( text / obligatoire ) : Libellé du la barre de bouton, accessibilité
type ( text / default :'' ) : Par défaut '', sinon avec la valeur vertical affiche le group de bouton verticalement.
class ( text / default : '' ) : Nom de classe par défaut ''. S'ajoute à la classe btn-group.
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML.
#nested : Contenu à présenter à l'intérieur de la macro.

Prévisualisation Style guide responsive @cStepDone [Nouvelle Fenêtre]

Accueil

Ce questionnaire est personnel

Votre nom Marcel

Macro

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

Html

<section class="step step-done ">
<section class="step-title">
<div class="container">
<h2 class="title">
<span class="step-number">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="#FFF" d="M 11.516602,1.7578123 5.0205081,8.2539061 2.5107424,5.6718748 0.50293,7.6230467 4.9931643,12.242188 13.49707,3.7382811 Z"/></svg></span>
<span>
Accueil</span>
<span class="d-none d-sm-block pl-2">
<button class="btn btn-primary btn-sm-block" name="action_doGoToStep" type="submit" value="1" aria-label="Modifier l'étape Accueil" formnovalidate>
Modifier
</button>
</span>
</h2>
</div>
</section>
<div class="container">
<div class="step-content">
<div class="form-row">
<div class="col ">
Ce questionnaire est personnel
</div>
</div>
<div class="form-row">
<div class="col ">
<label class="">
Votre nom
</label>
Marcel
</div>
</div>
<div class="d-block d-sm-none">
<button class="btn btn-primary btn-sm-block" name="action_doGoToStep" type="submit" value="1" aria-label="Modifier l'étape Accueil" formnovalidate>
Modifier
</button>
</div>
</div>
</div>
</section>

Etape Réalisée

Les paramètres

step ( text / obligatoire ) : Numéro de l'étape
title ( text / obligatoire ) : Titre de l'étape
titleLevel ( number / default : 2 ) : Niveau de titre de l'étape
idx ( number / obligatoire ) : Index de l'étape
actionName ( text / default :'action_doGoToStep' ) : Action utilisée pour le bouton "Modifier"
actionLabel ( text / default :'Modifier' ) : Label du bouton "Modifier"
actionAriaLabelKey ( text / default :'themeparisfr.ariaLabelUpdate' ) : Label accessible -aria-label- pour le bouton "Modifier"
actionHref ( text / default :'' ) : Url a préciser si on ne veux pas utiliser le formulaire par défaut.
actionClass ( text / default :'' ) : Class pour le lien.
actionParams ( text / default :'' ) : Paramètres pour le lien.
class ( text / default :'' ) : Classes CSS
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
#nested : Informations é présenter é l'intérieur de la macro.

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

Prévisualisation Style guide responsive @cStepCurrent [Nouvelle Fenêtre]

2 Dossier

Nom (Nom de famille) Saisir votre nom de famille

Prénom

Conserver ces données

Oui

Non

Les champs suivis d'un astérisque * sont obligatoires.

Macro

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

Html

<section class="step step-current " id="current_step">
<section class="step-title">
<div class="container">
<h2 class="title" data-step="2" title="Dossier - - étape en cours">
<span class="step-number">
2</span>
<span>
Dossier</span>
</h2>
</div>
</section>
<div class="container">
<section class="step-content">
<div class="form-row">
<div class="col sr-only">
<p class="mandatory-warning">
Les champs suivis d'un astérisque  *  sont obligatoires.</p>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="form-group">
<label class="" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<input type="text" class=" form-control" name="fname" id="fname" value="" placeholder="Exemple: Durand">
<small id="help_fname" class="form-text">Saisir votre nom de famille</small>
</div>
</div>
<div class="col ">
<div class="form-group">
<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="form-row">
<div class="col " aria-describedby="mydata">
<div class="form-group">
<label class="" for="mydata">
Conserver ces données
</label>
<div class="form-row">
<div class="col ">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="md2" name="mydata" class="custom-control-input" value="1">
<label class="custom-control-label" for="md2">Oui</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="md1" name="mydata" class="custom-control-input" value="2">
<label class="custom-control-label" for="md1">Non</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-12 col-md-10 ">
<p class="mandatory-warning">
Les champs suivis d'un astérisque  *  sont obligatoires.</p>
</div>
</div>
<div class="form-row">
<div class="col-12 d-flex justify-content-end mb-5">
</div>
</div>
</section>
</div>
</section>
<script>
$( function() {
var current = document.querySelector('#current_step');
var y = current.offsetTop - 180;
window.scrollBy(0, y);
});
</script>

Etapes courants

Les paramètres

step ( texte numérique / obligatoire ) : Numéro de l'étape
title ( text / obligatoire ) : Titre de l'étape
titleLevel ( number / default : 2 ) : Niveau de titre de l'étape
actionNextStep ( text / default : '' ) : Action pour le formulaire pour passer à l'étape suivante. Si vide le bouton n'est pas affiché.
labelNextStep ( text / default : 'Etape précédente' ) : Texte du bouton étape suivante.
actionPrevStep ( text / default : '' ) : Action pour le formulaire pour revenir à l'étape précédente. Si vide le bouton n'est pas affiché.
labelPrevStep ( text / default : 'Etape suivante' ) : Texte du bouton étape précédente.
actionSaveStep ( text / default : '' ) : Action pour le formulaire pour passer à l'étape suivante. Si vide le bouton n'est pas affiché.
labelSaveStep ( text / default : 'Sauvegarder l'avancement' ) : Texte du bouton étape suivante.
actionSaveForBackUpStep ( text / default : '' ) : Action pour le formulaire pour sauvegarder en cours de saisie du formulaire. Si vide le bouton n'est pas affiché.
labelForBackUpStep ( text / default : 'Sauvegarder l'avancement' ) : Texte du bouton "Sauvegarder".
actionResetBackUpStep ( text / default : '' ) : Action pour supprimer la sauvegarde en cours. Si vide le bouton n'est pas affiché.
labelResetBackUpStep ( text / default : 'Supprimer l'avancement' ) : Texte du bouton "Supprimer la sauvegarde en cours".
showPrevStep ( boolean / default : true ) : 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 ) : Si le formulaire a plus d'une étape, true par défaut, affiche le numéro de l'étape.
hasMandatory ( boolean / default : true ) : 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" ligne 37.
class ( text / default : '' ) : Nom de classe
params ( text / default :'' ) : Tout autre attribut HTML
#nested : Formulaire é présenter é l'intérieur de la macro.

Prévisualisation Style guide responsive @cStepNext [Nouvelle Fenêtre]

3 Localisation

Macro

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

Html

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

Etapes suivantes

Les paramètres

step ( text / obligatoire ) : Numéro de l'étape
title ( text / obligatoire ) : Titre de l'étape
titleLevel ( number / default : 2 ) : Niveau de titre de l'étape
class ( text / default : '' ) : Nom de classe
id ( text / default : '' ) : Identifiant
params ( text / default :'' ) : Tout autre attribut HTML

Prévisualisation Style guide responsive @cStepGroup [Nouvelle Fenêtre]

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

2 Dossier

Information

Aide sur 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

Les champs suivis d'un astérisque * sont obligatoires.

Macro

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

Html

<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 - - étape en cours">
<span class="step-number">
2</span>
<span>
Dossier</span>
</h2>
</div>
</section>
<div class="container">
<section class="step-content">
<div class="form-row">
<div class="col sr-only">
<p class="mandatory-warning">
Les champs suivis d'un astérisque  *  sont obligatoires.</p>
</div>
</div>
<div class="form-row">
<section class="w-100 step-group ">
<a name="last_"></a>
<div class="row ">
<div class="col-12 px-3 ">
<h2 class="h1 title">
Information </h2>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="accordion" id="acc0">
<div class="card outline my-5" >
<div class="card-header" data-toggle="collapse" data-target="#collapseAcc0" aria-expanded="true" >
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-target="#collapseAcc0" aria-expanded="true" aria-controls="collapseAcc0">
<span class="card-header-prepend">
<span class="rounded-bg-icon">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-alert-info" focusable="false" >
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</span>
</span>
<span id="headingAcc0">Aide sur Information.</span>
<span class="card-header-separator"></span>
<span class="btn-accordion" >
<span class="sr-only">Aide sur Information.</span>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</button>
</div>
<div id="collapseAcc0" class="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-toggle="collapse" data-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="form-row">
<div class="col ">
<div class="form-group">
<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">
<small id="help_name" class="form-text">Saisir votre nom de famille</small>
</div>
</div>
<div class="col ">
<div class="form-group">
<label class="" for="firstname">
Prénom
</label>
<input type="text" class=" form-control" name="firstname" id="firstname" value="">
</div>
</div>
</div>
</section>
</div>
<hr>
<p class="lead">Contenu d'une étape avec au moins une itération</p>
<div class="form-row">
<section class="w-100 step-group ">
<a name="last_"></a>
<div class="row ">
<div class="col-12 px-3 d-flex justify-content-between">
<h2 class="h1 title">
Information avec Itération (2)</h2>
<div class="text-right">
<button class="btn btn-link-action" name="action_removeIteration" value="rm_1" type="submit">
<i class="fa fa-trash" aria-hidden="true"></i> <small class="d-inline">Supprimer</small>
</button>
</div>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="form-group">
<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">
<small id="help_name" class="form-text">Saisir votre nom de famille</small>
</div>
</div>
<div class="col ">
<div class="form-group">
<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="form-row">
<div class="col px-4 px-sm-5 d-flex justify-content-end">
<button class="btn btn-action btn-sm" name="action_addIteration" value="add_1" type="submit">
<span class="fa fa-plus-circle"></span> Ajouter
</button>
</div>
</div>
</section>
</div>
<div class="form-row">
<div class="col-12 col-md-10 ">
<p class="mandatory-warning">
Les champs suivis d'un astérisque  *  sont obligatoires.</p>
</div>
</div>
<div class="form-row">
<div class="col-12 d-flex justify-content-end mb-5">
</div>
</div>
</section>
</div>
</section>
<script>
$( function() {
var current = document.querySelector('#current_step');
var y = current.offsetTop - 180;
window.scrollBy(0, y);
});
</script>

Contenu étape

Les paramètres

title ( text / obligatoire ) : Titre de l'étape
iterable ( bool / default : false ) : 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 ) : 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 ) : Nombre max d'itération.
labelAddIteration ( text / default :'Ajouter' ) : Libellé du bouton d'ajout de l'itération.
labelDelIteration ( text / default :'Supprimer' ) : Libellé du bouton de suppresssion de l'itération.
headerParams ( text / default :'' ) : Aide affichée dans la bulle d'aide
help ( text / default :'' ) : Ajout de paramètres au header
class ( text / default :'main' ) : Les valeurs possibles sont 'main','primary','external-primary','outline-external-link' et 'link'
id ( text / default :'' ) : Identifiant unique
params ( text / default :'' ) : Tout autre attribut HTML
#nested : Informations é présenté é l'intérieur de la macro.

Thème Paris.fr - archive 1.4.5 -

Les paramètres

Les paramètres

Les paramètres

Aide

Le hasard

Fait bien

Les choses

Les paramètres

Les paramètres de cCarouselItem

Aide

Carte

Sous titre card

Carte

Sous titre card

Carte avec image

Carte avec image et pied de page

Sous titre card

Carte Format Horizontal

Les paramètres

Carte Flotante

Les paramètres

Card Layout par défault "group"

Carte

Sous titre card

Carte avec image

Carte avec image et pied de page

Sous titre card

Card Layout "deck"

Carte

Sous titre card

Carte avec image

Carte avec image et pied de page

Sous titre card

Card Layout "columns"

Carte

Sous titre card

Carte avec image

Carte avec image et pied de page

Sous titre card

Carte avec image

Carte

Sous titre card

Carte avec image

Les paramètres

Les paramètres

Macro cConsentTacService

Etape Vide

Etape 50%

Etape 100%

Etape Vide

Etape 50%

Etape 100%

Etape Vide

Etape 50%

Etape 100%

Les paramètres

Aide

Les paramètres

Aide

Liste de liens

Liste de fichiers

Liste de liens

Liste de liens

Les paramètres

Erreur Enorme

Grossière erreur tout est à revoir

Les paramètres

Les paramètres

Aide

Les paramètres

Aide

Les paramètres

Les paramètres

Les paramètres

Les paramètres

Les paramètres

Les paramètres

Les paramètres

Déclaration d'un formulaire

Thème Paris.fr
- archive 1.4.5 -

Accueil