Tag
Le Tag catégorise/classe/organise les contenus à l’aide de mots-clés. Il aide les utilisateurs à rechercher et à trouver facilement une information.
Tags non-cliquables
- Un Tag non-cliquable avec un libellé
- Un Tag non-cliquable avec un icône à gauche
- Un Tag non-cliquable en petite taille (
:sm)
Code
= dsfr_tag(title: "bleu")
= dsfr_tag(title: "bleu", icon: "arrow-right-line")
= dsfr_tag(title: "bleu", size: :sm)Résultat
bleu
bleu
<p class="fr-tag">
bleu
</p>
<p class="fr-tag fr-fi-arrow-right-line fr-tag--icon-left">
bleu
</p>
<p class="fr-tag fr-tag--sm">
bleu
</p>Tags interactifs
- Un Tag cliquable
- Un Tag désélectionné
- Un Tag sélectionné
- Un Tag supprimable
Les tags supprimables n’autorisent pas l’utilisation d’icônes (autres que la croix de suppression déjà présente)
Le handler JS onclick donné en exemple est indicatif, à vous de l’implémenter dans votre environnement.
Code
= dsfr_tag(title: "bleu", url: "#")
= dsfr_tag(title: "bleu", selected: false)
= dsfr_tag(title: "bleu", selected: true)
= dsfr_tag(title: "bleu",
dismissable: true,
html_attributes: { onclick: "event.preventDefault(); this.parentNode.removeChild(this);" })Résultat
<a class="fr-tag" href="#" target="_self">
bleu
</a>
<button class="fr-tag" aria-pressed="false">
bleu
</button>
<button class="fr-tag" aria-pressed="true">
bleu
</button>
<button class="fr-tag fr-tag--dismiss" aria-label="Retirer bleu" onclick="event.preventDefault(); this.parentNode.removeChild(this);">
bleu
</button>