Notice
Une notification dans la page : ce dont la personne a besoin à présent, avec le statut indiqué par couleur, icône et mot.
Sur cette page
Playground
Le premier rappel part demain à 9 h.
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Rappel enregistré</strong><p>Le premier rappel part demain à 9 h.</p></div>Quand l'utiliser
- Après une action, juste au-dessus de son conteneur, pour indiquer le résultat : « Planification créée ».
- Pour quelque chose qui affecte toute la page : un service en panne, une échéance à venir.
Quand ne pas l'utiliser
- Erreur de champ : ErrorMessage et ErrorSummary.
- Statut d'un élément : Tag.
- Dans un coin de l'écran, comme un toast : jamais.
Exemples
Les docs ont acquis les guides de forme.
La première notification sort demain à 9h.
Elle repart aujourd'hui à 3h.
La connexion est tombée. Ce que vous avez écrit reste ici ; réessayez.
Les quatre
Tout avec la ligne autour, dans la couleur du statut ; l'information utilise la ligne douce, sans couleur de statut. Aucun n'est orange.
Afficher le code
<div class="feitio-notice" data-status="ok" role="status">
<svg class="feitio-icon" aria-hidden="true">…</svg>
<strong>Agendamento criado</strong>
<p>O primeiro aviso sai amanhã às 9h.</p>
</div>Fermer et temps
Les docs ont acquis les guides de forme.
Avec fermeture
Le X dans le coin : le message reste jusqu'à ce que la personne le ferme. Sans le X, il reste jusqu'à ce que l'écran change.
Afficher le code
<div class="feitio-notice">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">…</button>
</span>
</div>Le premier disparaît demain à 9h.
Avec temps
Avec data-timeout, le message disparaît tout seul, et la chaîne autour du X se dénoue avec le temps. Passez la souris dessus : le temps s'arrête.
Afficher le code
<div class="feitio-notice" data-status="ok" role="status" data-timeout="8000">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">
<svg class="ring" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="100" d="…"/></svg>…
</button>
</span>
</div>
<script>feitioNotice.show(aviso) // depois da ação</script>- L'heure est hors de l'état par défaut. Quand activé, le bouton de fermeture vient avec lui, afin que la personne puisse le fermer plus tôt.
- Uniquement pour succès et information. Les avertissements et les erreurs ne disparaissent jamais tout seul : la personne doit les voir.
- L'heure s'arrête tant que la souris ou le focus sont sur l'avertissement. Un avertissement déjà présent sur la page ne commence à compter que lorsqu'il apparaît dans la fenêtre.
- Déjà à l'écran, il ne se pose plus : si la même action se produit à nouveau, l'avertissement change son texte et redémarre le compteur, sans l'animation du papier. Au départ, il s'estompe et l'espace se ferme en glissant.
Anatomie
Le premier disparaît demain à 9h.
- Icone de statut.
- Titre : ce qui s'est passé, brièvement.
- Fermer, optionnel. Avec le temps, le fil autour du X se dénoue jusqu'à ce que l'avertissement disparaisse.
- Texte, optionnel : quoi faire ou ce qui suit.
- Cadre : l'arrière-plan et la ligne dans la couleur du statut.
Faire et ne pas faire
Do
Le mot propre du bouton, en deux mots.
Don’t
Votre demande a été traitée avec succès.
"Success" ne dit pas ce qui a fonctionné, et le texte répète le titre.
Écriture
- Titre : ce qui s'est passé, avec le mot de l'action ("Création planifiée").
- Texte : uniquement s'il indique quoi faire ou ce qui vient ensuite.
Où cela va
- Juste au-dessus du conteneur où l'action s'est produite, avec le StatusOverlay.
- Au sommet du contenu, lorsqu'il concerne toute la page.
- À l'intérieur d'un bloc, lorsqu'il ne concerne que celui-ci.
Accessibilité
- Après une action,
role="status"(ourole="alert"pour les erreurs), afin que les lecteurs d'écran l'annoncent. - Le statut n'est jamais uniquement par la couleur : icône et mot dans le titre.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-notice" | obligatoire | La boîte de notification. |
data-status | aucune, "ok", "warn", "error" | Information (sans attribut), succès, avertissement ou erreur. |
role | "status", "alert" | Lorsqu'il apparaît après une action. |
class="tools" + class="close" | optionnel | Le bouton de fermeture, en haut à droite. |
data-timeout | millisecondes | Déparaît après ce temps ; uniquement avec succès et information. Porte le fil autour du X. |
feitioNotice.show(el) | JS | Affiche l'avertissement après une action : il s'atterrit comme du papier, ou redémarre le temps uniquement s'il est déjà à l'écran. |