-
Notifications
You must be signed in to change notification settings - Fork 0
Onglet coulissant
Ce composant affiche un onglet au bord de la zone de contenu avec la capacité de glisser pour afficher le contenu.
Chef du projet : Stephane Berube (@berubs)
Le but de ce composant est d'ajouter un mécanisme pour afficher de contenu additional (p. ex. une table des matières) sans gaspiller d'espace valable sur la page.
Ce composant peut être utilisé sur n'importe quelle page où il fait de bon sens d'afficher une table des matières.
Dans votre contenu, affichez un élément avec la classe wet-boew-slideout :
<div class="wet-boew-slideout">
<h2>Table des matières</h2>
<ul id="list">
<li><a href="#">Contexte</a></li>
<li><a href="#">Guide infonaute de technologie — Le processus</a></li>
<li><a href="#">Structure et aperçu d'industrie</a></li>
<li><a href="http://alpha.gcwwwtemplates.tbs-sct.ircan.gc.ca/theme-clf2-nsi2/slideout-fra.html">Page actuelle</a></li>
<li><a href="#">Partenariats</a></li>
<li><a href="#">E-commerce</a></li>
<li><a href="#">Commercialisation</a></li>
<li><a href="#">Productivité</a></li>
</ul>
</div>
Utilisés les paramètres suivants dans l'attribut data-wet-boew pour changer l'image qui est utilsée par l'onglet coulissant.
Contient le texte montré quand le panneau de l'onglet coulissant est fermé.
Contient le texte montré quand le panneau de l'onglet coulissant est ouvert.
<div class="wet-boew-slideout" data-wet-boew='{"txtShow": "Afficher la table des matières", "txtHide": "Cacher la table des matières"} }'>
<h2>Table of Contents</h2>
<ul id="list">
<li><a href="#">Context</a></li>
<li><a href="#">Technology Roadmapping — The Process</a></li>
<li><a href="#">Industry Structure and Overview</a></li>
<li><a href="http://alpha.gcwwwtemplates.tbs-sct.ircan.gc.ca/theme-clf2-nsi2/slideout-eng.html">Current page</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">E-commerce</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Productivity</a></li>
</ul>
</div>
Avec la version 3.1, l'onglet coulissant utilise maintenant du texte plutôt que des images.
Les paramètres pour modifier le contenu de l'onglet ont été changés de "imgShow et "imgHide" à "txtShow" et "txtHide" respectivement.
Par exemple, cette boîte "wet-boew-slideout" version 3.0:
<div class="wet-boew-slideout" data-wet-boew='{"imgShow": {"src": "images/show-afficher.png", "height": 62, "width": 17, "alt": "Afficher la table des matières"}, "imgHide": {"src": "images/hide-cacher.png", "height": 62, "width": 17, "alt": "Cacher la table des matières"} }'>
Devrait être remplacé par ce qui suit dans v3.1:
<div class="wet-boew-slideout" data-wet-boew='{"txtShow": "Afficher la table des matières", "txtHide": "Cacher la table des matières"} }'>
Le code pour l'onglet coulissant se trouve à plusieurs endroits dans le répertoire source de la BOEW :
- js/workers/slideout.js - contient le code JavaScript de l'onglet coulissant
- js/sass/includes/_slideout.scss - contient le CSS pour l'onglet coulissant
- js/sass/includes/_slideout-ie7.scss - contient le CSS spécifique à IE7 pour l'onglet coulissant
Il n’existe actuellement aucun problème connu.