====== Onglets (Tabs) ======

Pour simplifier les choses, cet exemple n'inclut aucune balise **aria** pour l'instant.

===== Structure générale =====

<code html>
<div class="container-fluid">

    <!-- ONGLETS -->
    <ul ...>
        <li ...><a ...>Products</a></li>
        <li ...><a ...>Orders</a></li>
        <li ...><a ...>Admin</a></li>
    </ul>

    <!-- PAGES -->
    <div ...>

        <div ...>
            <p>Page "Products"</p>
        </div>

        <div ...>
            <p>Page "Orders"</p>
        </div>

        <div ...>
            <p>Page "Admin"</p>
        </div>

    </div>

</div>
</code>

===== Classes =====

^UL   |**nav nav-tabs**                                       |
^LI   |**nav-item**                                           |
^A    |**nav-link**                                           |
^     |**active**                                             |
^DIV  |**tab-content** pour la div globale contenant les pages|
^     |**tab-pane** pour les divs correspondant aux pages     |
^     |**fade** pour ajouter un effet de fondu entre les pages|
^     |**show active** pour la page actuellement affichée     |

<code html>
<div class="container-fluid">

    <!-- ONGLETS -->
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link active">Products</a></li>
        <li class="nav-item"><a class="nav-link">Orders</a></li>
        <li class="nav-item"><a class="nav-link">Admin</a></li>
    </ul>

    <!-- PAGES -->
    <div class="tab-content">

        <div class="tab-pane fade active">
            <p>Page "Products"</p>
        </div>

        <div class="tab-pane fade">
            <p>Page "Orders"</p>
        </div>

        <div class="tab-pane fade">
            <p>Page "Admin"</p>
        </div>

    </div>

</div>
</code>

===== Roles =====

^UL  | **tablist**                                          |
^A   | **tab**                                              |
^DIV | **tabpanel** (pour les divs correspondant aux pages) |

<code html>
<div class="container-fluid">

    <!-- ONGLETS -->
    <ul role="tablist">
        <li ...><a role="tab">Products</a></li>
        <li ...><a role="tab">Orders</a></li>
        <li ...><a role="tab">Admin</a></li>
    </ul>

    <!-- PAGES -->
    <div ...>

        <div role="tabpanel">
            <p>Page "Products"</p>
        </div>

        <div role="tabpanel">
            <p>Page "Orders"</p>
        </div>

        <div role="tabpanel">
            <p>Page "Admin"</p>
        </div>

    </div>

</div>
</code>

===== Data =====

^A  | **data-toggle="tab"** |

<code html>
    <ul ...>
        <li ...><a data-toggle="tab">Products</a></li>
        <li ...><a data-toggle="tab">Orders</a></li>
        <li ...><a data-toggle="tab">Admin</a></li>
    </ul>
</code>

===== Identifiants et liens =====

^DIV | Chaque page a un **id**                                                     |
^A   | Chaque lien a un **href** correspondant à l'**id** de la page qu'il affiche |

<code html>
<div class="container-fluid">

    <!-- ONGLETS -->
    <ul ...>
        <li ...><a href="#pageProducts">Products</a></li>
        <li ...><a href="#pageOrders">Orders</a></li>
        <li ...><a href="#pageAdmin">Admin</a></li>
    </ul>

    <!-- PAGES -->
    <div ...>

        <div id="pageProducts">
            <p>Page "Products"</p>
        </div>

        <div id="pageOrders">
            <p>Page "Orders"</p>
        </div>

        <div id="pageAdmin">
            <p>Page "Admin"</p>
        </div>

    </div>

</div>
</code>