Onglets (Tabs)
Pour simplifier les choses, cet exemple n'inclut aucune balise aria pour l'instant.
Structure générale
<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>
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 |
<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>
Roles
UL | tablist |
A | tab |
DIV | tabpanel (pour les divs correspondant aux pages) |
<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>
Data
<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>
Identifiants et liens
DIV | Chaque page a un id |
A | Chaque lien a un href correspondant à l'id de la page qu'il affiche |
<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>