Tags (Tags)

Les tags sont des marqueurs sémantiques qui sont associés aux articles afin de les regrouper. Cliquer sur un tag permet de consulter une liste d’articles associés.

Usage

  • Les tags sont des mots-clés descriptifs associés à un contenu (article, vidéo).
  • Ils permettent d’étiqueter, catégoriser ou organiser des éléments.
  • L’utilisateur peut accéder par le tap ou le clic à la page regroupant les informations contenant les mêmes mots-clés.
  • Mettre le texte en majuscule n’est pas autorisé, même pour lui donner plus d’importance.

Liste de tags

  • La liste de tags est une suite horizontale de tags.
  • Les tags peuvent être utilisés à plusieurs dans des groupes de tags. Lorsque le nombre de tags dépasse la largeur de la colonne, on peut faire glisser la liste d’un simple toucher-glisser pour les écrans tactiles, ou d’un clic sur les boutons-flèches pour les tablettes et desktop.
  • En mobile, lorsque le nombre de tags dépasse la largeur de la colonne, on affiche un masque dégradé transparent à droite de la liste, afin d’informer l’utilisateur sur la présence d’éléments supplémentaires.

Bonnes pratiques

  • La 1re lettre du tag est en majuscule, le reste est en minuscule.
  • Ne pas finaliser le texte par une ponctuation.
  • Les tags sont généralement courts et composés d’un seul mot.
  • Le texte de la balise est un adjectif ou un nom, mais pas un verbe.
  • La couleur d’arrière-plan doit être suffisamment contrastée avec celle du tag.

Style & code

Dépendances :

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

Tags standards

Les articles comportent généralement plusieurs tags, c'est pourquoi ils sont conçus pour être affichés sous forme de liste. Cependant, si vous avez besoin d'afficher un tag unique dans un emplacement spécifique, il est possible de créer un tag sans utiliser de liste.

Tag seul

Pour un tag unique, le lien doit porter la classe su-tag pour avoir le design attendu.

<a class="su-tag" href="javascript:;">Actualité en continu</a>

Liste de tags

La liste de tags ne nécessite qu’une classe sur le <ul>, la classe su-tags. Pas besoin de classes enfants et donc pas besoin de la classe su-tag.

N. B. – Puisqu’il s’agit d’une zone de navigation, ce composant devrait être intégré dans une balise <nav>.

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

<section class="su-row">
    <div class="su-col-lg-12">
        <nav>
            <ul class="su-tags">
                    <li><a href="javascript:;">Présidentielle</a></li>
                    <li><a href="javascript:;">Politique</a></li>
                    <li><a href="javascript:;">Budget 2023</a></li>
                    <li><a href="javascript:;">Europe</a></li>
                    <li><a href="javascript:;">Climat</a></li>
                    <li><a href="javascript:;">Justice</a></li>
                    <li><a href="javascript:;">Santé</a></li>
                    <li><a href="javascript:;">Faits divers</a></li>
                    <li><a href="javascript:;">Mondial de rugby féminin</a></li>
                    <li><a href="javascript:;">Route du Rhum</a></li>
                    <li><a href="javascript:;">Citations</a></li>
                    <li><a href="javascript:;">Cuisine</a></li>
                    <li><a href="javascript:;">Actualité en continu</a></li>
                    <li><a href="javascript:;">Tag très long, voire trop long !!!</a></li>
            </ul>
        </nav>
    </div>
</section>

Tags contrastés

Si vous devez afficher des tags sur un fond qui ne lui permet pas de ressortir, vous pouvez utiliser la classe su-contrast à côté de la classe su-tags ou de la classe su-tag.

Tag seul

<div style="background: #e4e3e1; padding: 10px;">
    <a class="su-tag su-contrast" href="javascript:;">Actualité en continu</a>
</div>

Liste de tags

<nav style="background: #e4e3e1; padding: 10px;">
    <ul class="su-tags su-contrast">
            <li><a href="javascript:;">Présidentielle</a></li>
            <li><a href="javascript:;">Politique</a></li>
            <li><a href="javascript:;">Actualité en continu</a></li>
    </ul>
</nav>

Liste de tags avec la classe su-contrast sur un parent

Vous pouvez aussi mettre cette classe sur un parent.

<nav class="su-contrast" style="background: #e4e3e1; padding: 10px;">
    <ul class="su-tags">
            <li><a href="javascript:;">Présidentielle</a></li>
            <li><a href="javascript:;">Politique</a></li>
            <li><a href="javascript:;">Actualité en continu</a></li>
    </ul>
</nav>

Tags larges

Pour afficher des tags plus grands, utilisez la classe su-wide à côté de la classe su-tags ou de la classe su-tag.

Tag seul

<a class="su-tag su-wide" href="javascript:;">Actualité en continu</a>

Liste de tags

<nav>
    <ul class="su-tags su-wide">
            <li><a href="javascript:;">Présidentielle</a></li>
            <li><a href="javascript:;">Politique</a></li>
            <li><a href="javascript:;">Actualité en continu</a></li>
    </ul>
</nav>

Liste de tags avec la classe su-wide sur un parent

Vous pouvez aussi mettre cette classe sur un parent.

<nav class="su-wide">
    <ul class="su-tags">
            <li><a href="javascript:;">Présidentielle</a></li>
            <li><a href="javascript:;">Politique</a></li>
            <li><a href="javascript:;">Actualité en continu</a></li>
    </ul>
</nav>

Liste de tags avec carrousel

Ce composant s’appuie à la fois sur le JS du carrousel et le composant Carrousel (carrousel).

Afin de créer la version « glissable » de la liste de tags, 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 tags 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 1er 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>

Ce qui donne comme code complet :

<section class="su-row">
    <nav class="su-col-lg-12 su-carrousel snap-migrate">
        <ul class="su-tags su-carrousel-container" data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'>
                <li><a href="javascript:;">Présidentielle</a></li>
                <li><a href="javascript:;">Politique</a></li>
                <li><a href="javascript:;">Budget 2023</a></li>
                <li><a href="javascript:;">Europe</a></li>
                <li><a href="javascript:;">Climat</a></li>
                <li><a href="javascript:;">Justice</a></li>
                <li><a href="javascript:;">Santé</a></li>
                <li><a href="javascript:;">Faits divers</a></li>
                <li><a href="javascript:;">Mondial de rugby féminin</a></li>
                <li><a href="javascript:;">Route du Rhum</a></li>
                <li><a href="javascript:;">Citations</a></li>
                <li><a href="javascript:;">Cuisine</a></li>
                <li><a href="javascript:;">Actualité en continu</a></li>
                <li><a href="javascript:;">Tag très long, voire trop long !!!</a></li>
        </ul>
        <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>

Exemple avec des tags larges :

<section class="su-row">
    <nav class="su-col-lg-12 su-carrousel snap-migrate">
        <ul class="su-tags su-wide su-carrousel-container" data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'>
                <li><a href="javascript:;">Présidentielle</a></li>
                <li><a href="javascript:;">Politique</a></li>
                <li><a href="javascript:;">Budget 2023</a></li>
                <li><a href="javascript:;">Europe</a></li>
                <li><a href="javascript:;">Climat</a></li>
                <li><a href="javascript:;">Justice</a></li>
                <li><a href="javascript:;">Santé</a></li>
                <li><a href="javascript:;">Faits divers</a></li>
                <li><a href="javascript:;">Mondial de rugby féminin</a></li>
                <li><a href="javascript:;">Route du Rhum</a></li>
                <li><a href="javascript:;">Citations</a></li>
                <li><a href="javascript:;">Cuisine</a></li>
                <li><a href="javascript:;">Actualité en continu</a></li>
                <li><a href="javascript:;">Tag très long, voire trop long !!!</a></li>
        </ul>
        <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-tag
  • su-tags
  • su-contrast
  • su-wide

Classes anexes

Autres attributs

  • data-suswipe

Le code a bien été copié !