Onglet coulissant - nschonni/wet-boew GitHub Wiki
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 les propriétés de l'image quand le panneau de l'onglet coulissant est fermé.
src: chaîne
URI de L'image à afficher quand le panneau de l'onglet coulissant est fermé.
height: intègre
Hauteur (en pixels) de l'image qui est référencée par imgShow.path
C'est une hauteur de '147' par défaut qui est l'hauteur de l'image par défault.
width: intègre
Largeur (en pixels) de l'image qui est référencée par imgShow.path
C'est une largeur de '30' par défault qui est la largeur de l'image par défault.
alt: chaîne
Le text d'afficher dans l'attribute alt de l'image qui est référencée par imgShow.
Par défault c'est Show table of contents en anglais et Afficher la table des matières en français.
Contient les propriétés de l'image quand le panneau de l'onglet coulissant est ouvert.
Il a les mêmes propriétés que imgShow auparavant.
<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'} }">
<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>
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.