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>

Exemples

Développement

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-ie.scss - contient le CSS spécifique à IE7 pour l'onglet coulissant

Problèmes connus

Il n’existe actuellement aucun problème connu.

Recherche