Tabs

Une composante JavaScript de tabs (onglets) est un élément d'interface utilisateur qui permet de présenter du contenu organisé en onglets cliquables. Lorsqu'un utilisateur clique sur un onglet, le contenu associé est affiché, tandis que le contenu des autres onglets est masqué.

Comment l'utiliser

Étapes d’installation

Pour installer Tabs, il suffit d’avoir les fichiers SCSS et JS nécéssaires dans vos dossiers src et donner les bons data aux bons éléments.

Afin d'utiliser la composante, mettre l'attribut data-component="Tabs" sur l'élément HTML qui contient les onglets.

Identifier les éléments HTML qui représentent les onglets qui doivent être cliquable en leur ajoutant la classe .js-tab

Paramètres

Pour fair le lien entre le contenu et les onglets, il faut leur donner un data-tab-id ou data-tab-content selon le contexte

Les contenus

Identifier les éléments HTML qui représentent les contenus d'onglet qui doivent être apparaitre en leur ajoutant l'attribut data-tab-content-id. La valeur doit être une chaine de caractère unique.

Les onglets

À vos élément HTML qui représentent les onglets, (.js-tab) ajoutez-y un attribut data-tab-id. La valeur doit être une chaine de caractère unique identique au contenu associé(data-tab-content-id).

Classe d'états

Pour les changements d'affichage, j'utilise une classe d'état qui permet de faire des changements au CSS

Is-active

Sur l'onglet et le contenu qui doit être actif, j'ajoute ou enleve la classe .is-active lorsqu'il y a un clique sur le panneau.

Comment faire un lien vers un tabs

Si vous désirez faire un lien vers un tabs précis, il suffit de faire votre lien normalement et d'y ajouter '?id=monId' à la fin. De cette manière, votre lien ouvrira automatiquement l'onglet désiré.

Comment l'utiliser en dehors de domComp

À l'intérieur d'un fichier JavaScript, importez la classe `Tabs` que vous aurez préalablement intégré à votre projet.

Dans l'exemple ci-dessus, element est égal au HTMLElement qui a l'attribut data-component="Tabs"