Onglet coulissant

Aperçu

Chef du projet : Stephane Berube (@berubs)

Objet

L'objet 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.

Rationale

Ce composant peut être utilisé sur n'importe quelle page où il fait de bon sens d'afficher une table des matières.

Mise en oeuvre

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 &mdash; 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>

Exemple pratique

Paramètres

Utilisés les paramètres suivants dans l'attribut data-wet-boew pour changer l'image qui est utilsée par l'onglet coulissant.

txtShow

Contient le texte montré quand le panneau de l'onglet coulissant est fermé.

txtHide

Contient le texte montré quand le panneau de l'onglet coulissant est ouvert.

Exemple

<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 &mdash; 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>

Migration de 3.0 à 3.1

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"} }'>

Exemples

Développement

Le code pour l'onglet coulissant se trouve à plusieurs endroits dans le répertoire source de la BOEW :

Problèmes connus

Il n’existe actuellement aucun problème connu.

Historique des versions