Tab

Ce composant permet d'avoir plusieurs zones de contenu en son sein, mais de n'en afficher qu'une seule à la fois grâce à un système de navigation par onglets. Le style est géré par Trilogy. Le comportement peut être géré par Trilogy Vanilla en suivant le code d'exemple, ou de manière indépendante dans le cas contraire.

Code de base

Les onglets s'affichent alignés à gauche par défaut et nécessitent différents attributs data- afin de fonctionner en harmonie avec Trilogy Vanilla et permettent la navigation fluide à la souris comme au clavier. Les classes tab-context, tabs, tab, tab-panels et tab-panel gèrent le style (voir l'exemple ci-dessous). Les rôles et attributs ARIA permettent de rendre le composant accessible.

Aperçu

Mode responsive

Contenu lié au premier onglet

Contenu lié au deuxième onglet

Contenu lié au troisième onglet

Contenu lié au quatrième onglet

                                                            <div class="tab-context" data-tabs-context="">
                                    <div role="tablist" class="tabs">
                                        <button role="tab" tabindex="0" aria-selected="true" aria-controls="panel-a1" class="tab is-active" data-tab-navigation="">Bouygues en bref</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-a2" class="tab" data-tab-navigation="">Carte de la couverture</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-a3" class="tab" data-tab-navigation="">Notre 5G</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-a4" class="tab" data-tab-navigation="">La Fibre by Bouygues</button>
                                    </div>
                                    <div class="tab-panels" data-tabs-wrapper="">
                                        <div role="tabpanel" id="panel-a1" class="tab-panel is-active" aria-expanded="true" data-tab-content="">
                                            <p>Contenu lié au premier onglet</p>
                                        </div>
                                        <div role="tabpanel" id="panel-a2" class="tab-panel" aria-expanded="false" data-tab-content="">
                                            <p>Contenu lié au deuxième onglet</p>
                                        </div>
                                        <div role="tabpanel" id="panel-a3" class="tab-panel" aria-expanded="false" data-tab-content="">
                                            <p>Contenu lié au troisième onglet</p>
                                        </div>
                                        <div role="tabpanel" id="panel-a4" class="tab-panel" aria-expanded="false" data-tab-content="">
                                            <p>Contenu lié au quatrième onglet</p>
                                        </div>
                                    </div>
                                </div>

DO

L'attribut tabindex="0" permet de choisir le tab qui sera actif par défaut ; ne pas oublier de régler les autres à -1.

WARNING

L'ancienne syntaxe (utilisation de <ul> et <li> pour la structure et <a> pour les tabs) est déconseillée et les styles associés à cette mise en forme seront dépréciés dans le futur.

ACCESSIBILITY

Les rôles ARIA tablist, tab, tabpanel ainsi que les attributs ARIA et le roving tabindex (géré par Trilogy Vanilla via les data attribute) sont nécessaires pour rester conforme aux exigences d'accessibilité. L'utilisation d'une balise <button> pour les tabs est recommandée.

Alignement

Utilisez les facettes .is-centered ou .is-right pour changer l'alignement du groupe d'onglet

Aperçu

Mode responsive

                                                            <div class="tab-context" data-tabs-context="">
                                    <div role="tablist" class="tabs is-centered">
                                        <button role="tab" tabindex="0" aria-selected="true" aria-controls="panel-b1" class="tab is-active" data-tab-navigation="">Bouygues en bref</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-b2" class="tab" data-tab-navigation="">Carte de la couverture</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-b3" class="tab" data-tab-navigation="">Notre 5G</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-b4" class="tab" data-tab-navigation="">La Fibre by Bouygues</button>
                                    </div>
                                </div>
                
                                <div class="tab-context" data-tabs-context="">
                                    <div role="tablist" class="tabs is-right">
                                        <button role="tab" tabindex="0" aria-selected="true" aria-controls="panel-c1" class="tab is-active" data-tab-navigation="">Bouygues en bref</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-c2" class="tab" data-tab-navigation="">Carte de la couverture</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-c3" class="tab" data-tab-navigation="">Notre 5G</button>
                                        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-c4" class="tab" data-tab-navigation="">La Fibre by Bouygues</button>
                                    </div>
                                </div>

Pleine largeur

Utilisez la facette .is-fullwidth pour donner au groupe d'onglets la possibilité de s'étendre sur toute la largeur disponible (chaque onglet fera la taille nécessaire à son contenu). Aucun impact sur mobile et tablette.

Aperçu

Mode responsive

Contenu lié au premier onglet

Contenu lié au deuxième onglet

Contenu lié au troisième onglet

Contenu lié au quatrième onglet

                                                        <div class="tab-context" data-tabs-context="">
                                <div role="tablist" class="tabs is-fullwidth">
                                    <button role="tab" tabindex="0" aria-selected="true" aria-controls="panel-d1" class="tab is-active" data-tab-navigation="">Bouygues en bref</button>
                                    <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-d2" class="tab" data-tab-navigation="">Carte de la couverture</button>
                                    <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-d3" class="tab" data-tab-navigation="">Notre 5G</button>
                                    <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-d4" class="tab" data-tab-navigation="">La Fibre by Bouygues</button>
                                </div>
                                <div class="tab-panels" data-tabs-wrapper="">
                                    <div role="tabpanel" id="panel-d1" class="tab-panel is-active" aria-expanded="true" data-tab-content="">
                                        <p>Contenu lié au premier onglet</p>
                                    </div>
                                    <div role="tabpanel" id="panel-d2" class="tab-panel" aria-expanded="false" data-tab-content="">
                                        <p>Contenu lié au deuxième onglet</p>
                                    </div>
                                    <div role="tabpanel" id="panel-d3" class="tab-panel" aria-expanded="false" data-tab-content="">
                                        <p>Contenu lié au troisième onglet</p>
                                    </div>
                                    <div role="tabpanel" id="panel-d4" class="tab-panel" aria-expanded="false" data-tab-content="">
                                        <p>Contenu lié au quatrième onglet</p>
                                    </div>
                                </div>
                            </div>