Buttons tab (Boutons-onglets)

Le composant Boutons-onglets permet aux utilisateurs de naviguer entre des sections de contenu associées, en affichant une seule section à la fois. Le comportement ressemble à celui d’onglets dans une application, comme ceux d’un navigateur.

Usage

Le composant Boutons-onglets est composé de plusieurs boutons affichés horizontalement.

Un bouton se présente sous 2 états :

état par défaut
état actif (l’onglet correspondant au contenu affiché).

Bonnes pratiques

Afficher au minimum 2 boutons;
Utiliser des intitulés clairs et courts.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
composant Carrousel (carrousel) (pour la liste de boutons-onglet avec swipe).

Standard

Les boutons-onglet sont toujours au minimum deux. C’est pourquoi ils s’afficheront dans une liste (cette liste peut être au choix une <ul> ou une <ol>). De plus, puisqu’il s’agit d’une zone de navigation, ce composant devrait être intégré dans une balise <nav>.

Les boutons sont composés d’un <input type="radio"> ou d’un <a> en fonction du fonctionnement choisi au clic (bouton-radio pour un changement d’une partie de la page, lien pour un changement de page). Pour leur donner l’apparence attendue, ajouter la classe su-buttons-tab à la liste.

L’état actif indique quel bouton correspond à la section affichée.

N. B. – Il s’agit ici de la version minimale des boutons-onglet (sans gestion du cas où cette liste serait plus large que son conteneur). Dans ce cas, les boutons passent en dessous quand ils arrivent en bout de ligne. Toutefois, il est recommandé d’utiliser la méthode avec swipe (tactile) / carrousel (non tactile) décrite plus bas…

Bouton-onglet avec bouton-radio

Pour cette version il faut intégrer dans le <li> un <input type="radio"> suivi d’un <label>, les deux étant reliés par les attributs for et id. Il faut aussi associer les boutons radio dans un groupe avec un attribut name identique, pour qu’ils puissent exclure les autres.

N. B. – Le bouton-radio n’étant pas dans un formulaire et n’ayant aucune valeur à renvoyer, il n’a pas besoin de l’attribut value.

Pour l’état actif, il faut que le bouton-radio soit coché (checked).

<nav>
    <ol class="su-buttons-tab">
        <li>
            <input type="radio" id="2020" name="annees"><label for="2020">2020</label>
        </li>
        <li>
            <input type="radio" id="2021" name="annees"><label for="2021">2021</label>
        </li>
        <li>
            <input type="radio" id="2022" name="annees"><label for="2022">2022</label>
        </li>
        <li>
            <input type="radio" id="2023" name="annees" checked><label for="2023">2023</label>
        </li>
    </ol>
</nav>

Bouton-onglet avec lien

La version avec changement de page ne demande que de simples liens dans les <li>. Pour l’état actif, ajouter la classe su-active au lien.

N. B. – Puisque le changement d’état d’un bouton est lié à un changement de page, la démonstration ci-dessous ne peut illustrer ce changement d’état au clic…

<nav>
    <ol class="su-buttons-tab">
        <li>
            <a href="javascript:;">2020</a>
        </li>
        <li>
            <a href="javascript:;">2021</a>
        </li>
        <li>
            <a href="javascript:;">2022</a>
        </li>
        <li>
            <a href="javascript:;" class="su-active">2023</a>
        </li>
    </ol>
</nav>

Avec swipe / carrousel

La version « glissable » de ce composant s’appuie à la fois sur le JS du carrousel et le composant carrousel standard.

il faut ajouter les classes su-carrousel et snap-migrate sur le parent de la liste, ainsi que la classe su-carrousel-container sur la liste elle-même. Cela permet d’avoir un affichage tronqué de la liste sur une ligne, avec les options de déplacement prévus pour atteindre les boutons masqués. Ce déplacement est possible par un glissement du doigt (swipe) sur écrans tactiles et des boutons de défilement sur les écrans non tactiles (carrousel).

En plus de ces classes, il faut ajouter le déclencheur JS data-suswipe avec ces paramètres :

le sel qui pointe sur les li,
halfSwipe à true
rambo à false

Ce qui donne : data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'.

Il faut aussi ajouter les 2 Navigation buttons (boutons de navigation) pour desktop, la classe su-inactive sur le 1^er bouton, ainsi que les déclencheurs JS data-suswipeprev et data-suswipenext :

<button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>

Version avec boutons-radio

<section class="su-row">
    <nav class="su-col-lg-12 su-carrousel snap-migrate">
        <ol class="su-buttons-tab su-carrousel-container" data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'>
                <li><input type="radio" id="Region-toutes" name="regions"><label for="Region-toutes">TOUTES</label></li>
                <li><input type="radio" id="Region-01" name="regions"><label for="Region-01">Auvergne-Rhône-Alpes</label></li>
                <li><input type="radio" id="Region-02" name="regions"><label for="Region-02">Bourgogne-Franche-Comté</label></li>
                <li><input type="radio" id="Region-03" name="regions" checked><label for="Region-03">Bretagne</label></li>
                <li><input type="radio" id="Region-04" name="regions"><label for="Region-04">Centre-Val de Loire</label></li>
                <li><input type="radio" id="Region-05" name="regions"><label for="Region-05">Corse</label></li>
                <li><input type="radio" id="Region-06" name="regions"><label for="Region-06">Grand Est</label></li>
                <li><input type="radio" id="Region-07" name="regions"><label for="Region-07">Hauts-de-France</label></li>
                <li><input type="radio" id="Region-08" name="regions"><label for="Region-08">Île-de-France</label></li>
                <li><input type="radio" id="Region-09" name="regions"><label for="Region-09">Normandie</label></li>
                <li><input type="radio" id="Region-10" name="regions"><label for="Region-10">Nouvelle-Aquitaine</label></li>
                <li><input type="radio" id="Region-11" name="regions"><label for="Region-11">Occitanie</label></li>
                <li><input type="radio" id="Region-12" name="regions"><label for="Region-12">Pays de la Loire</label></li>
                <li><input type="radio" id="Region-13" name="regions"><label for="Region-13">Provence-Alpes-Côte d’Azur</label></li>
        </ol>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </nav>
</section>

Version avec liens

<section class="su-row">
    <nav class="su-col-lg-12 su-carrousel snap-migrate">
        <ol class="su-buttons-tab su-carrousel-container" data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'>
                <li><a href="javascript:;">TOUTES</a></li>
                <li><a href="javascript:;">Auvergne-Rhône-Alpes</a></li>
                <li><a href="javascript:;">Bourgogne-Franche-Comté</a></li>
                <li><a href="javascript:;" class="su-active">Bretagne</a></li>
                <li><a href="javascript:;">Centre-Val de Loire</a></li>
                <li><a href="javascript:;">Corse</a></li>
                <li><a href="javascript:;">Grand Est</a></li>
                <li><a href="javascript:;">Hauts-de-France</a></li>
                <li><a href="javascript:;">Île-de-France</a></li>
                <li><a href="javascript:;">Normandie</a></li>
                <li><a href="javascript:;">Nouvelle-Aquitaine</a></li>
                <li><a href="javascript:;">Occitanie</a></li>
                <li><a href="javascript:;">Pays de la Loire</a></li>
                <li><a href="javascript:;">Provence-Alpes-Côte d’Azur</a></li>
        </ol>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </nav>
</section>

Sur fond sombre

Pour gérer l’affichage de ce composant sur fond sombre, il suffit de mettre la classe su-negative au-dessus de la classe su-buttons-tab.

<section class="su-row" style="background: DimGray; padding: 10px">
    <nav class="su-col-lg-12 su-carrousel snap-migrate su-negative">
        <ol class="su-buttons-tab su-carrousel-container" data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'>
                <li><input type="radio" id="Region-toutes-b" name="regions-b"><label for="Region-toutes-b">TOUTES</label></li>
                <li><input type="radio" id="Region-01-b" name="regions-b"><label for="Region-01-b">Auvergne-Rhône-Alpes</label></li>
                <li><input type="radio" id="Region-02-b" name="regions-b"><label for="Region-02-b">Bourgogne-Franche-Comté</label></li>
                <li><input type="radio" id="Region-03-b" name="regions-b" checked><label for="Region-03-b">Bretagne</label></li>
                <li><input type="radio" id="Region-04-b" name="regions-b"><label for="Region-04-b">Centre-Val de Loire</label></li>
                <li><input type="radio" id="Region-05-b" name="regions-b"><label for="Region-05-b">Corse</label></li>
                <li><input type="radio" id="Region-06-b" name="regions-b"><label for="Region-06-b">Grand Est</label></li>
                <li><input type="radio" id="Region-07-b" name="regions-b"><label for="Region-07-b">Hauts-de-France</label></li>
                <li><input type="radio" id="Region-08-b" name="regions-b"><label for="Region-08-b">Île-de-France</label></li>
                <li><input type="radio" id="Region-09-b" name="regions-b"><label for="Region-09-b">Normandie</label></li>
                <li><input type="radio" id="Region-10-b" name="regions-b"><label for="Region-10-b">Nouvelle-Aquitaine</label></li>
                <li><input type="radio" id="Region-11-b" name="regions-b"><label for="Region-11-b">Occitanie</label></li>
                <li><input type="radio" id="Region-12-b" name="regions-b"><label for="Region-12-b">Pays de la Loire</label></li>
                <li><input type="radio" id="Region-13-b" name="regions-b"><label for="Region-13-b">Provence-Alpes-Côte d’Azur</label></li>
        </ol>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </nav>
</section>

Liste des classes disponibles

su-buttons-tab
su-active
su-negative

Classes anexes

su-carrousel (dépendant du composant Carrousel (carrousel))
snap-migrate (dépendant du composant Carrousel (carrousel))
su-carrousel-container (dépendant du composant Carrousel (carrousel))
su-navigation-button (dépendant du composant Navigation buttons (boutons de navigation))
su-inside (dépendant du composant Navigation buttons (boutons de navigation))
su-left (dépendant du composant Navigation buttons (boutons de navigation))
su-right (dépendant du composant Navigation buttons (boutons de navigation))
su-inactive (dépendant du composant Carrousel (carrousel))
su-icon (dépendant des icônes de SipaUI [cf. Ressources/Icônes])

Autres attributs

data-suswipe