Badges
Travail en cours
Cette page porte sur le travail en cours.
Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).
Usage
Utilisez les badges (indicateurs numériques) afin de souligner le nombre de mises à jour, d'éléments nouveaux ou non lus associés à un lien.
Conception et codage
Utilisation de base
Valeur par défaut
Utiliser pour souligner des éléments nouveaux ou à jour avec un badge numérique simple gris ou bleu en forme de bouton.
Bonne utilisation
Points de conformité :
- Placez
.badgeà droite du lien - Assurez-vous que le badge est dynamique, en ce sens qu'une fois que les items sont exécutés, la valeur numérique est réduite
- Veillez à ce qu'il ne contienne que des renseignements numériques
- Assurez-vous que le badge comprenne un texte invisible pour qu'il soit descriptif. Par exemple :
<p><a href="#">Boîte de réception <span class="badge">42<span class="wb-inv"> courriels non lus </span></span></a></p>
Mauvaise utilisation
Points de conformité :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
- N'indiquez pas qu'il y a zéro « 0 » élément; s'il n'y a aucun élément, le badge devrait disparaître
Code
// Badge gris :
<p><a href="#">Boîte de réception <span class="badge">42<span class="wb-inv">courriels non lus </span></span></a></p>
// Badge bleu sous forme de bouton :
<p><a class="btn btn-primary" href="#">Boîte de réception <span class="badge">42<span class="wb-inv"> courriels non lus</span></span></a></p>Utilisation améliorée
Badges qui se réduisent seuls
Utilisez-les lorsqu'il n'y a aucun élément nouveau ou non lu. Les badges se réduisent simplement (au moyen du sélecteur empty du CSS).
Compatibilité multinavigateur
Les badges ne se réduiront pas seuls dans Internet Explorer 8 parce qu'il manque de soutien pour le sélecteur empty.
Apparence
Bonne utilisation
Point d'observation :
- Enlevez le contenu dans le badge et se réduira de lui-même, au lieu de supprimer le badge
Mauvaise utilisation
Point d'observation :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
Code
// Aucun contenu à l'intérieur du badge:
<p><a href="#">... <span class="badge"></span></a></p>Fonctions complémentaires
Des ffonctions et des comportements complémentaires sont disponibles.
Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe)
- Date de modification: