Tag

Les tags permettent de catégoriser et labelliser visuellement les composants auquels ils sont associés, ou pour lister des filtres appliqués à une recherche.

Code de base

Aperçu

Mode responsive

Tag par défaut Tag secondaire Tag success Tag danger Tag warning

                                                            <span class="tag">Tag par défaut</span>
                                <span class="tag is-secondary">Tag secondaire</span>
                                <span class="tag is-success">Tag success</span>
                                <span class="tag is-danger">Tag danger</span>
                                <span class="tag is-warning">Tag warning</span>

Aperçu avec un fond

Mode responsive

Tag par défaut Tag secondaire Tag success Tag danger Tag warning

                                                            <span class="tag is-inverted">Tag par défaut</span>
                                <span class="tag is-secondary is-inverted">Tag secondaire</span>
                                <span class="tag is-success is-inverted">Tag success</span>
                                <span class="tag is-danger is-inverted">Tag danger</span>
                                <span class="tag is-warning is-inverted">Tag warning</span>

Avec actions

Un container .tags devient nécessaire pour créer des tags plus complexes.
• Pour ajouter une action, la classe .has-addons est nécessaire, le curseur de souris devient alors une main au hover.
• Pour une action de suppression par exemple, on ajoutera aussi .is-delete (d'autres actions à venir dans le futur).
• Pour changer la couleur du tag, pensez à mettra la classe adéquate sur le container afin d'impacter tous les enfants.
• Pour gérer l'espacement entre plusieurs tags mis à la suite, une marge est ajoutée à droite de chaque tag ; pour la supprimer, ajoutez la facette .is-gapless sur le container des tags.
Le comportement au clic sur le tag n'est pas du ressort de Trilogy : l'attribut data-tag-action n'est là qu'à titre de suggestion.

Aperçu

Mode responsive

Tag par défaut (supprimable)

Tag secondaire (supprimable)

Tag warning (supprimable)

Tag success (supprimable)

Tag danger (supprimable)

                                                            <div class="tags has-addons is-delete">
                                    <span class="tag">Tag par défaut (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>
                
                                <div class="tags has-addons is-delete is-secondary">
                                    <span class="tag">Tag secondaire (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>
                
                                <div class="tags has-addons is-delete is-warning">
                                    <span class="tag">Tag warning (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>
                
                                <div class="tags has-addons is-delete is-success">
                                    <span class="tag">Tag success (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>
                
                                <div class="tags has-addons is-delete is-danger">
                                    <span class="tag">Tag danger (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>

Aperçu avec un fond

Mode responsive

Tag par défaut (supprimable)

Tag secondaire (supprimable)

Tag warning (supprimable)

Tag success (supprimable)

Tag danger (supprimable)

                                                            <div class="tags has-addons is-delete is-inverted">
                                    <span class="tag">Tag par défaut (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>
                
                                <div class="tags has-addons is-delete is-secondary is-inverted">
                                    <span class="tag">Tag secondaire (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>
                
                                <div class="tags has-addons is-delete is-warning is-inverted">
                                    <span class="tag">Tag warning (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>
                
                                <div class="tags has-addons is-delete is-success is-inverted">
                                    <span class="tag">Tag success (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>
                
                                <div class="tags has-addons is-delete is-danger is-inverted">
                                    <span class="tag">Tag danger (supprimable)</span>
                                    <button class="tag" data-tag-action="delete" aria-label="delete">
                                        <span class="icon"><i class="tri-times" aria-hidden="true"></i></span>
                                    </button>
                                </div>

DO

Intégrer la classe de couleur (principale ou sémantique) sur le container des tags : <div class="tags is-secondary">, ceci afin de bien impacter tous les enfants.
La classe has-addons est nécessaire pour ajouter des actions. Ce composant est tourné vers l'avenir : bien que seule l'action de suppression soit disponible pour le moment (.is-delete), d'autres viendront par la suite

DON'T

Laisser la classe de couleur (principale ou sémantique) sur le tag, et non sur son container : <div class="tags"><div class="tag is-secondary"></div>…</div>

Groupés

Un container .tags est nécessaire pour créer des ensembles de tags et gérer leur espacement lorsque ceux-ci se retrouvent sur plusieurs lignes. Pour supprimer cette marge en bas de chaque tag, ajoutez une facette is-gapless sur le container des tags. Pour centrer les tags, ajoutez une facette is-centered.

Aperçu

Mode responsive

Samsung Huawei Xiaomi Apple Écran supérieur ou égal à 6 pouces Écran inférieur à 6 pouces Résitant à l'eau Compatible 5G Stockage 128 Go et plus Coque offerte Spotify 3 mois offerts

                                                            <div class="tags">
                                    <span class="tag">Samsung</span>
                                    <span class="tag">Huawei</span>
                                    <span class="tag">Xiaomi</span>
                                    <span class="tag">Apple</span>
                                    <span class="tag">Écran supérieur ou égal à 6 pouces</span>
                                    <span class="tag">Écran inférieur à 6 pouces</span>
                                    <span class="tag">Résitant à l'eau</span>
                                    <span class="tag">Compatible 5G</span>
                                    <span class="tag">Stockage 128 Go et plus</span>
                                    <span class="tag">Coque offerte</span>
                                    <span class="tag">Spotify 3 mois offerts</span>
                                </div>