Documentation pour la fonctionnalité du site détails de page
- Statut
- Stable
- Type
- Fonctionnalité du site Canada.ca
- Dernière révision
- 2022-06-30
Objectif
Affiche la section Détails de la page dans une balise de pied de page.
Peut contenir les composants suivants :
- Signaler un problème sur cette page
- Partager cette page
- Date de modification
Exemple pratique
- Exemple de détails de page par défaut
- Détails de la page sans exemples de boutons Signaler un problème et Partager cette page
- Détails de la page sans exemple de bouton Signaler un problème
- Détails de la page sans exemple de bouton Partager cette page
- Exemple de détails de page v.1.0 (obsolète)
Comment mettre en œuvre
-
Pour afficher le bouton "Signaler un problème sur cette page", créez une code><div> avec l'attribut de données suivant :
data-ajax-replace="../feedback/ajax/report-problem-fr.html".Pour la version HTML simplifiée, un élément de lien doit être créé qui pointe vers la page du formulaire de signalement d'un problème :
<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a>Pour plus d'informations sur le plugiciel Data Ajax, veuillez visiter Page de documentation Data Ajax
-
Pour afficher le bouton "Partager cette page", créez une code><div> avec l'attribut de données suivant :
data-wb-share='{"lnkClass": "btn btn-default btn-block"}'et la classe CSS suivanteclass="wb-share"Pour plus d'informations sur le plugiciel Gadget de partage, veuillez visiter Gadget de partage
La date de modification - format de texte normal contenant la date de modification.
Évaluation et rapport
Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.
API (version 2.1)
| Classe CSS | Gabarit | Rendu visuel | Schéma |
|---|---|---|---|
| Version 1.0 | Version 2.1 | Version 1.0 | n.d. |
Classe CSS (v1.0)
page-details
Gabarit (v.2.1)
Notes sur la migration du gabarit
Support de la version 2.0
Bien que le gabarit ait été mis à jour vers la version 2.1, la version 2.0 est toujours prise en charge. Cependant, le contenu de la page et le <footer> doivent être situés à l'intérieur d'un <article>. Voici un exemple de code :
<main>
<article>
...
Contenu de la page
...
<footer class="pagedetails">
...
</footer>
</article>
</main>Détails de la page avec "Signaler un problème sur cette page" et "Partager cette page" activés
Version 2.1
<section class="pagedetails">
<h2 class="wb-inv">Détails de la page</h2>
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-9">
<div data-ajax-replace="../feedback/ajax/report-problem-fr.html">
<div class="row row-no-gutters">
<div class="col-sm-11 col-md-7 col-lg-6">
<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
</div>
</div>
</div>
</div>
<div class="wb-share col-sm-4 col-md-3" data-wb-share="{"lnkClass" : "btn btn-default btn-block"}" >
</div>
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</section>Version précécentes
Version 2.0
<footer class="pagedetails">
<h2 class="wb-inv">Détails de la page</h2>
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-9">
<div data-ajax-replace="../feedback/ajax/report-problem-fr.html">
<div class="row row-no-gutters">
<div class="col-sm-11 col-md-7 col-lg-6">
<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
</div>
</div>
</div>
</div>
<div class="wb-share col-sm-4 col-md-3" data-wb-share="{"lnkClass" : "btn btn-default btn-block"}" >
</div>
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</footer>Version 1.0
<div class="pagedetails">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4">
<details class="brdr-0">
<summary class="btn btn-default text-center">Signaler un problème sur cette page</summary>
<div class="well row">
<div class="gc-rprt-prblm">
<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" >
{ formulaire de commentaires }
</div>
<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" >
<h3>Merci pour votre aide !</h3>
<p>Vous ne recevrez pas de réponse. Pour toute demande, veuillez <a href="https://www.canada.ca/fr/contact.html">nous contacter</a>.</p>
</div>
</div>
</div>
</details>
</div>
<div class="wb-share col-sm-4 col-md-3 col-sm-offset-2 col-md-offset-4 col-lg-offset-5" data-wb-share='{"lnkClass" : "btn btn-default btn-block"}' >
</div>
</div>
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-25</time></dd>
</dl>
</div>Détails de la page avec "Signaler un problème sur cette page" et "Partager cette page" désactivés
Version 2.1
<section class="pagedetails container">
<h2 class="wb-inv">Détails de la page</h2>
<div class="row">
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</section>Version précécentes
Version 2.0
<footer class="pagedetails container">
<h2 class="wb-inv">Détails de la page</h2>
<div class="row">
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</footer>Version 1.0
<div class="pagedetails container">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4"></div>
</div>
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-25</time></dd>
</dl>
</div>Détails de la page sans le bouton "Signaler un problème sur cette page"
Version 2.1
<section class="pagedetails">
<h2 class="wb-inv">Détails de la page</h2>
<div class="row">
<div class="wb-share col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" data-wb-share='{"lnkClass" : "btn btn-default btn-block"}' >
</div>
<div class="col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</section>Version précécentes
Version 2.0
<footer class="pagedetails">
<h2 class="wb-inv">Détails de la page</h2>
<div class="row">
<div class="wb-share col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" data-wb-share='{"lnkClass" : "btn btn-default btn-block"}' >
</div>
<div class="col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</footer>Version 1.0
<div class="pagedetails container">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4"></div>
<div class="col-sm-4 col-md-3 col-sm-offset-2 col-md-offset-4 col-lg-offset-5">
<div class="wb-share" data-wb-share='{"lnkClass" : "btn btn-default btn-block"}' >
</div>
</div>
</div>
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-25</time></dd>
</dl>
</div>Détails de la page sans le bouton "Partager cette page"
Version 2.1
<section class="pagedetails">
<h2 class="wb-inv">Détails de la page</h2>
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-9">
<div data-ajax-replace="../feedback/ajax/report-problem-fr.html">
<div class="row row-no-gutters">
<div class="col-sm-11 col-md-7 col-lg-6">
<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</section>Version précécentes
Version 2.0
<footer class="pagedetails">
<h2 class="wb-inv">Détails de la page</h2>
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-9">
<div data-ajax-replace="../feedback/ajax/report-problem-fr.html">
<div class="row row-no-gutters">
<div class="col-sm-11 col-md-7 col-lg-6">
<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</footer>Version 1.0
<div class="pagedetails">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4">
<details class="brdr-0">
<summary class="btn btn-default text-center">Signaler un problème sur cette page</summary>
<div class="well row">
<div class="gc-rprt-prblm">
<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" >
{ formulaire de commentaires }
</div>
<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" >
<h3>Merci pour votre aide !</h3>
<p>Vous ne recevrez pas de réponse. Pour toute demande, veuillez <a href="https://www.canada.ca/fr/contact.html">nous contacter</a>.</p>
</div>
</div>
</div>
</details>
</div>
</div>
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd><time property="dateModified">2022-04-25</time></dd>
</dl>
</div>Rendu visuel (v2.0)
- Signaler un problème (sur le côté gauche de la page) comme décrit dans l'exemple de signalement d'un problème
- Partagez cette page (sur le côté droit de la page) comme décrit dans la documentation sur le widget de partage
- Date de modification - format texte normal contenant la date ayant le format de date YYYY-MM-DD de modification, en bas :
<dl id="wb-dtmd"> <dt>Date de modification :</dt> <jj><time property="dateModified">2022-04-25</time></dd> </dl>
Détails de la page
- Date de modification :