{% extends 'base.html.twig' %} {% block title %}Toast - Design System - Bubul{% endblock %} {% block body %}
{# ===== HEADER ===== #}
Molecules /

Toast

Notifications temporaires non-bloquantes

{# ===== ALERT VS TOAST ===== #}

Toast vs Alert : quelle difference ?

Toast (cette page)

  • - Position fixe (coin inferieur droit)
  • - Disparait automatiquement apres X secondes
  • - Affiche via JavaScript : showToast()
  • - Ideal pour : confirmations, feedback rapide
  • - Ne bloque pas l'interface

Alert (composant inline)

  • - Position dans le flux du document
  • - Reste visible jusqu'a fermeture manuelle
  • - Inclus via Twig : {% verbatim %}{% include %}{% endverbatim %}
  • - Ideal pour : erreurs importantes, avertissements
  • - Fait partie du contenu de la page
{# ===== COMPOSITION ===== #}

Composition

Alert + JavaScript + CSS Animation = Toast

Le Toast utilise le meme design que l'Alert mais avec positionnement fixe, auto-dismiss et animations.

{# ===== PLAYGROUND INTERACTIF ===== #}

Playground

Testez le systeme de Toast en temps reel

{# Controles #}
5s
{# Boutons de generation #}

Survolez une notification pour mettre en pause le timer. Les notifications apparaissent en bas a droite.

{# ===== USAGE JAVASCRIPT ===== #}

Usage JavaScript

Pour les actions cote client (AJAX, interactions)

{# Exemple basique #}

Appel basique

// Afficher un toast
showToast('success', 'Titre', 'Message descriptif');

// Variantes disponibles
showToast('success', 'Succes', 'Operation reussie.');
showToast('error', 'Erreur', 'Une erreur est survenue.');
showToast('warning', 'Attention', 'Action irreversible.');
showToast('info', 'Info', 'Nouvelle version disponible.');
showToast('neutral', 'Note', 'Information generale.');
{# Exemple avec options #}

Avec options personnalisees

// Options disponibles
showToast('warning', 'Attention', 'Cette action est irreversible.', {
    duration: 8000,      // Duree en ms (defaut: 5000)
    dismissible: true,   // Bouton fermer (defaut: true)
    pauseOnHover: true   // Pause au survol (defaut: true)
});

// Toast persistant (sans auto-dismiss)
showToast('error', 'Erreur critique', 'Connexion perdue.', {
    duration: 999999  // Tres long = quasi-persistant
});

// Effacer tous les toasts
clearAllToasts();
{# Exemple AJAX #}

Exemple avec fetch/AJAX

fetch('/api/save', { method: 'POST', body: data })
    .then(response => {
        if (response.ok) {
            showToast('success', 'Sauvegarde', 'Donnees enregistrees avec succes.');
        } else {
            showToast('error', 'Erreur', 'Impossible de sauvegarder.');
        }
    })
    .catch(() => {
        showToast('error', 'Erreur réseau', 'Vérifiez votre connexion.');
    });
{# ===== USAGE SYMFONY ===== #}

Usage Symfony (Flash Messages)

Pour les redirections apres actions serveur

{# Controller #}

Dans un Controller

// Format: addFlash('type', 'Titre|Message')
// Le pipe (|) separe le titre du message

$this->addFlash('success', 'Compte cree|Votre compte a ete cree avec succes.');
$this->addFlash('error', 'Erreur|Une erreur est survenue lors de la sauvegarde.');
$this->addFlash('warning', 'Attention|Cette action est irreversible.');
$this->addFlash('info', 'Information|Une mise a jour est disponible.');

return $this->redirectToRoute('app_dashboard');
{# Integration automatique #}

Integration automatique

Le systeme de toast est deja integre dans base.html.twig. Les flash messages Symfony sont automatiquement convertis en toasts apres chaque redirect.

{# ===== PARAMETRES ===== #}

Parametres showToast()

Parametre Type Defaut Description
variantstring(requis)success, error, warning, info, neutral
titlestring(requis)Titre principal en gras
messagestring(requis)Message descriptif
options.durationnumber5000Duree d'affichage en millisecondes
options.dismissiblebooltrueAfficher le bouton fermer
options.pauseOnHoverbooltruePause du timer au survol
{# ===== FICHIER SOURCE ===== #}

Fichier source

templates/_molecules/toast/toast.html.twig

Inclus une seule fois dans base.html.twig. Contient le container, les templates HTML et le JavaScript.

{% endblock %}