Pour que les onglets puissent fonctionné il faut obligatoirement que chaque onglet soit relié à son panneau via l'association d'un id et d'un aria-controls.
Chaque panneau doit avoir un id unique Chaque onglet doit avoir un aria-controls avec la valeur id du panneau auquel il est lié
L'onglet qui sera actif au chargement de la page doit avoir la class is-active ainsi qu'un valeur de tabinidex="0" Le panneau qui sera actif au chargement de la page doit avoir la class is-show, tout les autres panneaux doivent eux avoir la class d-none
Attributs obligatoires : Onglets : aria-controls="id du panneau" data-tab-item Panneau : id data-tab-content
.js requis :
En cas d'injection de contenu en AJAX ou autre appel XHR il faudra faire appel au code suivant :
document.dispatchEvent(new CustomEvent('REFRESH_TABS_EVENTS'))
Cet appel devra être effectué une fois que l'HTML de la page est à jour. Il permet de rebind les événements JavaScript via le fichier dbm.Tabs.js sur les nouveaux nœuds HTML.
<div class="o-card">
<div class="c-card__header">
<div class="u-title--small">Carte avec onglets</div>
</div>
<div class="c-card__content">
<div class="js-tabs">
<ul class="c-tabs" role="tablist">
<li class="c-tab is-active" role="tab" id="tab-1" data-tab-item="data-tab-item" tabindex="0" aria-selected="true" aria-controls="tabpanel-1">Onglet 1 </li>
<li class="c-tab" role="tab" id="tab-2" data-tab-item="data-tab-item" tabindex="-1" aria-selected="false" aria-controls="tabpanel-2">Onglet 2 avec un text grand</li>
<li class="c-tab" role="tab" id="tab-3" data-tab-item="data-tab-item" tabindex="-1" aria-selected="false" aria-controls="tabpanel-3">Onglet 3 </li>
</ul>
<div class="c-tabpanel is-show" role="tabpanel" id="tabpanel-1" aria-labelleby="tab-1" tabindex="0" data-tab-content="data-tab-content">[Contenu du premier panneau 1]</div>
<div class="c-tabpanel d-none" role="tabpanel" id="tabpanel-2" aria-labelleby="tab-2" tabindex="0" data-tab-content="data-tab-content">[Contenu du premier panneau 2]</div>
<div class="c-tabpanel d-none" role="tabpanel" id="tabpanel-3" aria-labelleby="tab-3" tabindex="0" data-tab-content="data-tab-content">[Contenu du premier panneau 3]</div>
</div>
</div>
</div>
<div class="js-tabs">
<ul class="c-tabs" role="tablist">
<li class="c-tab is-active" role="tab" id="tab-1" data-tab-item="data-tab-item" tabindex="0" aria-selected="true" aria-controls="tabpanel-1">Onglet 1</li>
<li class="c-tab" role="tab" id="tab-2" data-tab-item="data-tab-item" tabindex="-1" aria-selected="false" aria-controls="tabpanel-2">Onglet 2</li>
</ul>
<div class="c-tabpanel is-show" role="tabpanel" id="tabpanel-1" aria-labelleby="tab-1" tabindex="0" data-tab-content="data-tab-content">[Contenu du premier panneau 1]</div>
<div class="c-tabpanel d-none" role="tabpanel" id="tabpanel-2" aria-labelleby="tab-2" tabindex="0" data-tab-content="data-tab-content">[Contenu du premier panneau 2]</div>
</div>