Comment construire un composant d'onglet réactif avec CSS et une touche de JavaScript

Dans ce didacticiel, nous allons apprendre à créer un composant d'onglet réactif avec CSS et un peu de JavaScript. Il est tout à fait possible de créer des composants d'onglet CSS purs, mais pour cet exemple, mettons en pratique nos compétences en JavaScript..

Voici ce que nous allons construire, en quelques grandes étapes:

Remarque: Ce tutoriel ne se concentrera pas sur la manière de rendre le composant de tabulation accessible. Par conséquent, l'exploration de l'accessibilité serait certainement une prochaine étape valable.

1. Le HTML

Pour commencer, examinons le balisage requis. Nous avons un conteneur qui inclut les onglets eux-mêmes (éléments de liste), ainsi que le contenu de chaque onglet (panneaux d'onglets). Pour associer un onglet au panneau correspondant, nous utilisons le index de données attribut personnalisé qui contient une valeur unique pour chaque panneau d'onglets. Cela dit, en raison de la numérotation à base zéro, un panneau avec data-index = 0 est associé au premier onglet, un panneau avec data-index = 1 est associé à la seconde, etc..

Voici le balisage HTML:

 
 
 Partie 1 
 
 Partie 2 
 
 Partie 3 
 
 
 
  
 
  
 
  
 
 

2. Le CSS

Dans une prochaine étape, spécifions quelques règles CSS pour notre composant. Rien d'extraordinaire, juste quelques styles de base. Une chose à noter est que nous n'utilisons aucune transition (par exemple un fondu, une diapositive) pour basculer entre les panneaux d'onglets; à la place, ils apparaissent et disparaissent avec un simple interrupteur marche / arrêt.

Voici les styles initiaux:

.tabs-container max-width: 1000px; marge: auto 50px; rembourrage: 25px;  .tabs display: flex;  .tabs li: not (: last-child) marge-droite: 7px;  .tabs li a display: block; position: relative; en haut: 4 px; rembourrage: 10px 25px; border-radius: 2px 2px 0 0; fond blanc; opacité: 0,7; transition: toutes les 0,1s se calment;  .tabs li.active a, .tabs li a: survol opacité: 1; en haut: 0;  .tabs-content position: relative; z-index: 2; rembourrage: 25px; border-radius: 0 4px 4px 4px; fond blanc;  .tabs-panel display: none;  .tabs-panel.active display: block; 

3. Le JavaScript

Avec le HTML et le CSS en place, il est temps de regarder le code JavaScript requis.

Chaque fois que nous cliquons sur un onglet, nous faisons les choses suivantes:

• Retirer le actif classe de l'onglet correspondant (par défaut le premier) et du panneau d'onglets associé (par défaut le premier).
• Trouvez le li parent de cet onglet, ajoutez le actif classe, et récupère son index.
• Recherchez le panneau d'onglets dont la valeur d'attribut (pour le index de données attribut) correspond à la valeur d’index susmentionnée et attribue le actif classe à elle.

Voici le code JavaScript résultant:

const tabLinks = document.querySelectorAll (". tabs a"); const tabPanels = document.querySelectorAll (". tabs-panel"); for (let el de tabLinks) el.addEventListener ("click", e => e.preventDefault (); document.querySelector ('. tabs li.active'). classList.remove ("active"); document. querySelector ('. tabs-panel.active'). classList.remove ("active"); const parentListItem = el.parentElement; parentList.classList.add ("active"); const index = [… parentListItem.parentElement.children] .indexOf (parentListItem); const panel = [… tabPanels] .filter (el => el.getAttribute ("data-index") == index); panel [0] .classList.add ("active");) ; 

4. Être réactif

Notre composant est presque prêt! La dernière chose à faire est de rendre le composant réactif. Ainsi, par exemple, lorsque la fenêtre d'affichage a une largeur maximale de 600 pixels, elle devrait se réduire et ressembler à ceci:

Comme nous utilisons une approche basée sur le bureau, voici les règles CSS que nous devons écraser: 

Écran @média et (largeur maximale: 600 pixels) .tabs direction de flexion: colonne;  .tabs li width: 100%;  .tabs li: not (: last-child) marge-droite: 0;  .tabs li a border-radius: 0; opacité: 1; en haut: 0;  .tabs li.active a :: before content: '•'; padding-right: 5px;  .tabs-content border-radius: 0; 

5. Support du navigateur

Notre démo fonctionne bien dans tous les navigateurs et appareils récents. Comme d'habitude avec mes tutoriels, nous utilisons Babel pour compiler le code ES6 jusqu'à ES5.

Conclusion

Dans ce court tutoriel, nous avons réussi à créer un composant d'onglet réactif utile avec HTML, CSS et JavaScript. Encore une fois, ce composant n'est pas correctement accessible, mais si vous souhaitez améliorer ses fonctionnalités, ce serait une bonne étape. Bonne codage!