Les avis sont de courts messages qui communiquent des renseignements à l’utilisateur. Ils sont intégrés au corps du texte ou apparaissent sous forme de messages contextuels.
Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.
Effectuer la commande suivante pour installer ce composant.
Importer les éléments suivants dans votre dossier app.module.ts.
| Nom | Type | Défaut | Description |
|---|---|---|---|
| id | string |
Identifiant du bouton. |
|
| class | string | primary-button by-keyboard |
Il y a deux types de boutons : primary-button and secondary-button |
| body | string |
Texte du bouton: for eg: body='button text' |
|
| (click) | method |
Appeler la méthode. |
|
| alertService | method |
Appeler la méthode. Le service d’alerte comporte quatre méthodes :
info
success
warn
error
Chaque méthode contient deux paramètres :
Message de la notification
Options
Voici les options :
showCloseButton
autoClose
keepAfterRouteChange
infoAriaLabel
successAriaLabel
warningAriaLabel
errorAriaLabel
|
|
| showCloseButton | boolean | Afficher ou masquer le bouton Close (Fermer) (sauf s’il y a une notification d’erreur). Exemple:-
options = {
showCloseButton: true;
autoClose: false,
keepAfterRouteChange: false,
infoAriaLabel: 'Note',
successAriaLabel: 'Success',
warningAriaLabel: 'Caution',
errorAriaLabel: 'Error',
};
|
|
| autoClose | boolean | Fermer automatiquement la notification. La notification d’erreur ne se ferme pas automatiquement. Exemple:
options = {
showCloseButton: true;
autoClose: false,
keepAfterRouteChange: false,
infoAriaLabel: 'Note',
successAriaLabel: 'Success',
warningAriaLabel: 'Caution',
errorAriaLabel: 'Error',
};
|
|
| keepAfterRouteChange | boolean | Continuer d’afficher la notification même si le chemin change. Exemple:
options = {
showCloseButton: true;
autoClose: false,
keepAfterRouteChange: false,
infoAriaLabel: 'Note',
successAriaLabel: 'Success',
warningAriaLabel: 'Caution',
errorAriaLabel: 'Error',
};
|
|
| infoAriaLabel | boolean | Texte de l’attribut aria-label pour la notification informative. Exemple:
options = {
showCloseButton: true;
autoClose: false,
keepAfterRouteChange: false,
infoAriaLabel: 'Note',
successAriaLabel: 'Success',
warningAriaLabel: 'Caution',
errorAriaLabel: 'Error',
};
|
|
| successAriaLabel | boolean | Texte de l’attribut aria-label pour la notification de succès. Exemple:
options = {
showCloseButton: true;
autoClose: false,
keepAfterRouteChange: false,
infoAriaLabel: 'Note',
successAriaLabel: 'Success',
warningAriaLabel: 'Caution',
errorAriaLabel: 'Error',
};
|
|
| warningAriaLabel | boolean | Texte de l’attribut aria-label pour la notification d’avertissement. Exemple:
options = {
showCloseButton: true;
autoClose: false,
keepAfterRouteChange: false,
infoAriaLabel: 'Note',
successAriaLabel: 'Success',
warningAriaLabel: 'Caution',
errorAriaLabel: 'Error',
};
|
|
| errorAriaLabel | boolean | Texte de l’attribut aria-label pour la notification d’erreur. Exemple:
options = {
showCloseButton: true;
autoClose: false,
keepAfterRouteChange: false,
infoAriaLabel: 'Note',
successAriaLabel: 'Success',
warningAriaLabel: 'Caution',
errorAriaLabel: 'Error',
};
|
Importer les éléments suivants dans votre thème ou votre page.
Importer les éléments suivants dans votre thème ou votre page.
Notifications de message transitoire
Veuillez noter que ce composant pourrait nécessiter un élément de style supplémentaire.
Please use Télécharger les fichiers for complete set of files.
Les avis permettent à l’utilisateur d’être informé des erreurs, des succès, des alertes et de l’information contextuelle avec un minimum de distraction, tout en le gardant sur la page.
Les avis peuvent avoir les états suivants :
Rédigez des avis en utilisant un langage clair et simple. Ils doivent comprendre du contenu qui communique de l’information, un message de réussite, une alerte ou une erreur.
| Lignes directrices | Exemples | |
|---|---|---|
| Longueur recommandée | Jusqu’à 20 mots | Vous avez validé votre identité à Postes Canada avec succès. |
| Saut de ligne | Réduire au minimum | Les services seront inaccessibles du 14 juill., 21 h au 15 juill., 9 h HE. |
| Formulation | Phrases complètes | Vous êtes déjà inscrit à FlexiLivraison, mais vous n'avez pas validé votre identité. Vous devez faire vérifier votre identité avant de pouvoir utiliser FlexiLivraison. |
| Majuscule | Majuscule en début de phrase, avec point | Vous avez ajouté une carte de crédit à votre profil. |
Expliquez la situation du point de vue de l’utilisateur. Mettez l’accent sur le problème et non sur la raison pour laquelle les utilisateurs voient l’avis.
Les messages d’erreur devraient s’afficher uniquement lorsque nécessaire. Ces avis doivent être utiles, pertinents, exempts de jargon et conviviaux.
L'icône de fermeture indique à l’utilisateur de fermer l’avis. Écrivez un texte de remplacement pour le symbole X.
Les avis contiennent une icône appropriée qui se rapporte au contexte. Appliquez le texte de remplacement qui décrit la fonction de l’avis.
Les avis n’ont pas leur propre halo de saisie. Les commandes interactives à l’intérieur du corps de l’avis sont dotées d’un contour de mise en évidence bien visible lorsqu’elles sont en état de survol ou de mise en évidence.
L’avis lui-même n’est pas interactif. Les éléments interactifs à l’intérieur de l’avis se trouvent dans la hiérarchisation des onglets de page.
Les liens ou les boutons à l’intérieur de l’avis ou du message contextuel suivent leurs interactions clavier respectives.
Assurez-vous que l’avis ou le message contextuel se trouve immédiatement à côté de l’élément déclencheur de la commande DOM afin qu’un utilisateur de clavier ou de lecteur d’écran puisse facilement interagir avec lui.
Les avis ou les messages contextuels peuvent avoir les propriétés ARIA suivantes :
Les utilisateurs peuvent désactiver l’animation d’un avis dans un système d’exploitation ou un navigateur. Il est important de respecter leur choix et de ne pas utiliser les animations pour les avis lorsque les utilisateurs les ont désactivées.
La propriété CSS prefers-reduced-motion peut nous indiquer si l’utilisateur a choisi d’éteindre les animations lorsque leur valeur est « réduire ». Dans de tels cas, l’animation de survol et l’animation volante devraient être désactivées.
Au moment de tester un avis, le testeur doit s’assurer de ce qui suit :
