Les notifications COMPOSANTS D’INTERFACE:Notification

Vous pouvez télécharger le dossier de ces exemples, nommé 08-Interface-13.

1. L’objectif NOTIFICATION:Utilisation

Dans les interfaces utilisateurs, il est très courant d’avoir des notifications qui s’affichent suite à une action. Bootstrap nous propose d’afficher des notifications avec des composants nommés Toasts.

Il est important de bien comprendre que ce composant est géré en grande partie par vos soins. Premier point, par défaut, les notifications Toasts ne s’affichent pas ! En effet, les notifications sont prévues pour apparaître uniquement lorsque cela est nécessaire. Donc c’est à vous de décider quand doit s’afficher une notification Toast. Pour cela, vous pouvez utiliser les méthodes JavaScript associées aux notifications. Voici l’URL de la documentation sur ces méthodes JavaScript : https://getbootstrap.com/docs/4.3/components/toasts/#javascript-behavior. Dans les exemples ci-dessous, nous ajouterons la classe .show à la notification, afin qu’elle s’affiche immédiatement. Deuxième point important, c’est à vous d’afficher les notifications Toasts au bon endroit dans l’interface utilisateur.

2. Une notification simple NOTIFICATION:Simple

Nous allons afficher une notification simple avec ce code :

<div class="toast show" role="alert" aria-live="assertive"...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les roues de chargement
Suivant
L'annonce d'accueil