Boite à onglets

Vue d'ensemble

Les onglets sont parfaits pour les applications Web d'une seule page. Ils permettent d’optimiser l’affichage du contenu dans un espace réduit grâce à un système d’étiquettes contrôlant l’affichage de panneaux relatifs.

Un onglet permet d'afficher dynamiquement et automatiquement le panneau associé et son contenu lorsque l'onglet reçoit le focus. Un seul onglet peut être activé à la fois.

Ce composant est totalement responsive et accessible. Il suit les recommandations wai-aria W3C Référence

Afin d'augmenter l'expérience utilisateur et notamment les utilisateurs de lecteurs d'écran par exemple. Un script Javascript est indispensable pour la gestion des onglets et l'affichage du contenu associé.

Ce script va permette d'uniformiser la hauteur des panneaux en ajustant la surface d'affichage au plus grand. Et de gérer la navigation dans les onglets, via les touches clavier.

La hauteur maximum des panneaux, peut être limitée grâce à la variable utilitaire --mh. Si le contenu est plus grand, alors une barre de défilement apparaitra automatiquement.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eos laboriosam placeat, quasi quibusdam quisquam sed voluptas. Accusantium asperiores delectus dolorum, hic iure maxime molestiae natus, quaerat quis sequi tempora. 

<div class="tabs">
	<ul role="tablist" aria-label="choix des groupes d'éléments">
		<li role="presentation">
			<a href="#panel-1" role="tab" id="tab-1" tabindex="0" aria-controls="panel-1" aria-selected="true">Onglet 1</a>
		</li>
		<li role="presentation">
			<a href="#panel-2" role="tab" id="tab-2" tabindex="-1" aria-controls="panel-2">Onglet 2</a>
		</li>
		<li role="presentation">
			<a href="#panel-3" role="tab" id="tab-3" tabindex="-1" aria-controls="panel-3">Onglet 3</a>
		</li>
	</ul>
	<section id="panels" role="region" aria-live="polite" style="--mh:10em;">
		<div id="panel-1" tabindex="0" role="tabpanel" aria-labelledby="tab-3" aria-hidden="false" aria-expanded="true">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eos laboriosam placeat, quasi quibusdam quisquam sed voluptas. Accusantium asperiores delectus dolorum, hic iure maxime molestiae natus, quaerat quis sequi tempora.
			</p>
		</div>
		<div id="panel-2" tabindex="0" role="tabpanel" aria-labelledby="tab-3" aria-hidden="true" aria-expanded="false">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium atque autem cumque, dicta distinctio ea eaque error et eveniet expedita facere fugit harum id illo labore laborum magni minus mollitia, nemo neque nesciunt numquam odit officiis quia quibusdam repellendus saepe sequi tempora tempore temporibus tenetur vel voluptas. Accusantium, illo.
			</p>
		</div>
		<div id="panel-3" tabindex="0" role="tabpanel" aria-labelledby="tab-3" aria-hidden="true" aria-expanded="false">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut beatae consectetur deserunt, dignissimos doloremque eaque expedita harum molestiae mollitia nemo officiis perferendis perspiciatis quidem quos! Accusantium aliquid atque consequatur doloremque eos, hic impedit nam officiis quos ut? Ab alias, aliquam architecto aspernatur atque commodi, consectetur dignissimos dolorum earum eligendi enim, esse et facere facilis fugit illo incidunt iure iusto labore laboriosam mollitia natus neque non pariatur perferendis quae quam quas quasi quis quod rem sapiente sunt tenetur ullam vitae!
			</p>
		</div>
	</section>
</div>
import Tabify from "../../src/scripts/tabify.js";

window.addEventListener('DOMContentLoaded', () => {
	Tabify.bind();
})

Personnalisation

Uniformisation et améliorations prévue Pour plus d'informations reportez-vous à la section Personnalisation