Tabbed interface

Overview

Project Lead: Stephane Berube (@berubs)

Implementation

• Create a tab container for each set of tabs using <div class="wet-boew-tabbedinterface"></div>.
• Add <div class="tabs-panel"> to each tab container and include <div id...> for each tab panel. The id for each tab panel must match the href for the associated tab (following the "#" symbol). For example:

<div class="wet-boew-tabbedinterface">
    <ul class="tabs">
        <li><a href="#tab1">National events</a></li>
        <li><a href="#tab2">Regional events</a></li>
        <li><a href="#tab3">Local events</a></li>
    </ul>
    <div class="tabs-panel">
        <div id="tab1">
            <p>tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p><a href="#">fake link</a></p>
        </div>
        <div id="tab2">
            <p >tab 2 - Consectetur adipiscing elit. Praesent sit amet felis.</p>
            <p><a href="#">fake link</a></p>
        </div>
        <div id="tab3">
            <p>tab 3 - Praesent sit amet felis. Etiam malesuada.</p>
            <p><a href="#">fake link</a></p>
        </div>
    </div>
</div>

Optional: Change the default appearance of a tab set by adding one of the following classes to the tab container:

• tabs-style-1: Stylized horizontal tabs design
• tabs-style-2: Horizontal news scroller design
• tabs-style-3: Vertical news scroller design with links on the right
• tabs-style-4: Slideshow design with text-based links below
• tabs-style-5: Slideshow design without text-based links
• tabs-style-6: Horizontal image scroller design with text or image based links

Note: tabs-style-2 and tabs-style-3 have a news scroller design with no inner padding so images can have a full bleed. Paragraphs and other text-based content must be wrapped by <div class="tabs-panel"> to pad them in. For example:

Optional: Specify which tab is selected by adding class="default" to that tab. For example:

<ul class="tabs">
    <li><a href="#tab1">National events</a></li>
    <li class="default"><a href="#tab2">Regional events</a></li>
    <li><a href="#tab3">Local events</a></li>
</ul>

Optional: Add class="auto-height-none" to the tab container to disable forcing all tab panels to be the same height:

<div class="wet-boew-tabbedinterface auto-height-none">

Optional: Add class="cycle-fast", class="cycle" or class="cycle-slow" to the tab container to add a "Play"/"Pause" ("Jouer"/"Pause") button for automatically rotating the tabs. The tabs rotate every 2 seconds for cycle-fast, every 6 seconds for cycle and every 8 seconds for cycle-slow. A different rotation delay can be specified using data-wet-boew='{"cycle":10000}' where the value for cycle is the delay in milliseconds. The tabs will automatically rotate by default unless class="auto-play-none" is added to the tab container.

<div class="wet-boew-tabbedinterface cycle auto-play-none">

Optional: Add class="animate-fast", class="animate" or class="animate-slow" to the tab container for a fast, medium or slow fade effect when transitioning between tab panels.

<div class="wet-boew-tabbedinterface animate">

Optional: Add class="slide-horz" or class="slide-vert" to the tab container for a sliding transition between tab panels.

<div class="wet-boew-tabbedinterface animate slide-horz">

Optional: Implement complex layouts within the tab containers. When creating parent/child grids, you must use row-start and row-end. There are rare times where this may not be desirable. For example with drag and drop widgets, each grid cell must be the same size so the addition of row-start or row-end on some of them may cause layout problems when the box is moved from one column to another. Therefore, you can use the class embedded-grid. This CSS acts as a container for the tabs and you do not need to put them in a grid cell. It also removes the borders so the full with of the space is available.