Toasts (Toasts)

Le composant de Toasts est conçu pour afficher des messages informatifs temporaires en bas de l’écran. Comme la pop-in ou les messages, il sert à communiquer directement avec le lecteur.

Usage

• Le composant Toasts peut être utilisé pour afficher des notifications de succès ou d’échec après une action de l’utilisateur.
• Contrairement à la pop-in ou aux messages, il est conçu pour être moins intrusif et disparaître automatiquement après un court délai, sans nécessiter d’interaction de la part de l’utilisateur, afin de ne pas interrompre son expérience.

Bonnes Pratiques

• Durée d’affichage : Le délai d’affichage du toast devrait être court pour ne pas perturber l’expérience utilisateur. Cependant, il doit être suffisamment long pour permettre à l’utilisateur de lire le message.
• Contenu concis : Limitez le texte de la notification à l’essentiel pour qu’il soit rapidement compréhensible. Évitez les messages excessivement longs.
• Positionnement : Le toast doit apparaître en bas de l’écran pour ne pas obstruer le contenu principal de la page.

Style & code

Toast standard

Apparence

Pour créer un message en toast, il suffit d’un <dialog> avec la classe .su-toast. Comme pour la popin, elle doit être présente dans le DOM au chargement de la page et sera invisible par défaut.

Un toast ne donne qu’un court message sans validation, puisqu’elle doit disparaître d’elle-même. Elle ne comportera donc aucun élément interactif.

JS :

if(typeof HTMLDialogElement != "function") { document.body.classList.add('no-dialog') }

CSS :

```
.no-dialog dialog,
.no-dialog [data-ofmodal] {
    display: none;
}

Déclenchement

Pour déclencher l’apparition du toast, il vous faut un déclencheur lié au scénario prévoyant son apparition. Ce déclencheur est à votre convenance, mais il peut s’appuyer sur le composant JS <dialog> avec la méthode popover fournit par SipaUI : data-sudialog='{"sel":"#toast-1"}'. Pour fonctionner, il faut que la <dialog> porte l’attribut popover. Vous pouvez aussi utiliser votre propre JS d’activation, toujours avec cette méthode popover.

Fermeture

Pour masquer le toast vous pouvez utiliser l’option timeout avec une valeur en millisecondes. Pour ne pas importuner l’utilisateur trop longtemps, celui-ci devrait être d’un maximum de 6 secondes. Le code complet devient donc : data-sudialog='{"sel":"#toast-1","timeout":6000}'. Si vous ne souhaitez pas utiliser cette option mais votre propre solution, il faudra utiliser la méthode JS close.

Ci-dessous le toast est affichée grâce au bouton et est masquée au bout de 6 secondes.

<button id="declencheur-toast" class="su-button su-primary" data-sudialog='{"sel":"#toast-1","timeout":6000}'>Afficher le toast (6 sec.)</button>
<dialog id="toast-1" class="su-toast" popover>
    <p>Votre demande a bien été prise en compte.</p>
</dialog>