Documentation - Toasts.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Toasts
Marssel intègre un système de notifications toast moderne et flexible pour afficher des messages temporaires à vos utilisateurs. Les toasts supportent différents types, positions, et peuvent être entièrement personnalisés.
Configuration de base
Le ToastManager est automatiquement initialisé :
const marssel = new Marssel();
// Le ToastManager est prêt à l'emploiUtilisation simple
Affichez un toast basique avec la fonction globale marsselToast :
// Toast simple
marsselToast.show('Opération réussie !');
// Toast avec options
marsselToast.show('Message personnalisé', {
duration: 3000,
position: 'top-right',
type: 'success'
});Types de toast
Marssel propose 4 types prédéfinis avec couleurs et styles adaptés :
// Succès (vert)
marsselToast.success('Enregistrement réussi !');
// Erreur (rouge)
marsselToast.error('Une erreur est survenue');
// Avertissement (orange)
marsselToast.warning('Attention aux modifications');
// Information (bleu)
marsselToast.info('Nouvelle mise à jour disponible');Positions disponibles
Placez vos toasts à différents emplacements de l'écran :
// Positions disponibles :
// 'top-right', 'top-left', 'top-center'
// 'bottom-right', 'bottom-left', 'bottom-center'
marsselToast.show('Message', { position: 'top-center' });
marsselToast.show('Message', { position: 'bottom-left' });Options avancées
Personnalisez vos toasts avec de nombreuses options :
marsselToast.show('Message complet', {
// Position
position: 'top-right',
// Durée d'affichage (0 = infini)
duration: 5000,
// Type
type: 'success',
// Titre optionnel
title: 'Succès',
// Bouton de fermeture
closable: true,
// Barre de progression
progress: true,
// Classes CSS personnalisées
classes: 'custom-toast',
// Callback à la fermeture
onClose: () => {
console.log('Toast fermé');
}
});Toast avec titre
Ajoutez un titre pour structurer vos messages :
marsselToast.success('Les modifications ont été enregistrées', {
title: 'Succès',
duration: 4000
});
marsselToast.error('Impossible de se connecter au serveur', {
title: 'Erreur de connexion',
duration: 6000
});Toast persistant
Créez un toast qui reste affiché jusqu'à fermeture manuelle :
const toastId = marsselToast.info('Message important', {
duration: 0, // 0 = infini
closable: true
});
// Fermer manuellement plus tard
setTimeout(() => {
marssel.toastManager.remove(toastId);
}, 10000);Gestion programmatique
Contrôlez vos toasts via l'API JavaScript :
// Afficher un toast et récupérer son ID
const id = marsselToast.show('Message');
// Supprimer un toast spécifique
marssel.toastManager.remove(id);
// Supprimer tous les toasts
marsselToast.clear();
// Mettre à jour le contenu
marssel.toastManager.updateContent(id, {
message: 'Nouveau message',
title: 'Mis à jour',
type: 'warning'
});
// Changer la position
marssel.toastManager.updatePosition(id, 'bottom-center');
// Obtenir la liste des toasts actifs
const activeToasts = marssel.toastManager.getActiveToasts();
console.log(activeToasts); // ['toast-1', 'toast-2', ...]Pause au survol
Les toasts se mettent automatiquement en pause au survol de la souris :
marsselToast.show('Survolez-moi pour mettre en pause', {
duration: 5000,
progress: true // La barre de progression se mettra en pause
});Responsive design
Les toasts s'adaptent automatiquement aux petits écrans :
// Sur mobile, les toasts prennent automatiquement
// toute la largeur avec des marges appropriées
marsselToast.show('Message mobile-friendly');Exemples pratiques
Les toasts s'adaptent automatiquement aux petits écrans :
Types de toast
Positions
Options avancées
Scénarios réels
Contrôle
Personnalisation CSS
Stylez vos toasts avec des classes personnalisées :
marsselToast.show('Toast personnalisé', {
classes: 'bg-[673AB7] c-[FFFFFF] rounded-[8px]',
type: 'info'
});Configuration globale
Modifiez la configuration par défaut :
// Accéder à la configuration
marssel.toastManager.config.position = 'bottom-right';
marssel.toastManager.config.duration = 4000;
marssel.toastManager.config.animationDuration = 400;
```
## Positions disponibles
Les positions suivantes sont supportées :
```
top-right En haut à droite (défaut)
top-left En haut à gauche
top-center En haut au centre
bottom-right En bas à droite
bottom-left En bas à gauche
bottom-center En bas au centre
```
## Types disponibles
```
success Message de succès (vert)
error Message d'erreur (rouge)
warning Avertissement (orange)
info Information (bleu)