Slide out Tab - nschonni/wet-boew GitHub Wiki

français

This component provides a tab at the edge of the content area that can slide out to show content.

Table of Contents Overview Description Use When Do Not Use When Implementation Parameters/Options imgShow Properties imgHide Example Examples Development Known Issues Future Development Version History

Project Lead: Stephane Berube (@berubs)

This feature adds a mechanism for providing additional content without wasting valuable space on the page.

• The slide out tab has been used predominently on Government of Canada websites to display a Table of Contents of the content on the page.

• Do not use with important content that could be missed by the user.

In your content, add a container with the wet-boew-slideout class:

<div class="wet-boew-slideout">
    <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>

• Working example

To change the images used in the tab, you can use the following parameters in the data-wet-boew attribute of the above container.

Contains the properties of the image used when the slide out panel is closed.

src: string
URI of the image to display when the slide out panel is closed.

height: integer
Height (in pixels) of the image referenced with imgShow.path.
Defaults to '147' which is the height of the default image.

width: integer
Width (in pixels) of the image referenced with imgShow.path.
Defaults to '30' which is the width of the default image.

alt: string
Text to place in the alt attribute of the image called by imgShow.
Defaults to Show table of contents on English pages and Afficher la table des matières on French pages.

Contains the properties of the image used when the slide out panel is opened.

It has the same properties as imgShow above.

<div class="wet-boew-slideout" data-wet-boew="{imgShow: {src: 'images/show-afficher.png', height: 62, width: 17, alt: 'Show the table of contents'}, imgHide: {src: 'images/hide-cacher.png', height: 62, width: 17, alt: 'Hide the table of contents'} }">
    <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>

• English example
• French example

The code for the slide out tab is located in several places within the source folder of WET:

• js/workers/slideout.js - contains the JavaScript code for the slide out tab
• js/sass/includes/_slideout.scss - contains the CSS for the slide out tab
• js/sass/includes/_slideout-ie7.scss - contains the IE7 specific CSS for the slide out tab

There are no known technical issues. If you find one, please contribute by filing an issue.

Usability testing on this feature has not yet been conducted.

Feel free to suggest feature/enhancements in the issue tracker.

• Slideout.js
• _slideout.scss
• _slideout-ie7.scss