Widget Alerte

Le widget Alerte affiche des messages informatifs, des avertissements, des succès ou des messages d'erreur aux utilisateurs dans votre interface d'application. Ce widget est basé sur le composant d'alerte d'Element UI et fournit diverses options de personnalisation.

Aperçu​

Le widget Alerte est un composant de notification polyvalent qui peut être utilisé pour :

• Afficher les messages système et les notifications
• Afficher les commentaires de validation
• Communiquer des informations importantes aux utilisateurs
• Fournir des alertes contextuelles basées sur les actions de l'utilisateur

Propriétés de Configuration​

Configuration de Base​

Type d'Alerte​

• Champ: type
• Type: Sélection déroulante
• Options:
  • primary - Alerte à thème bleu (par défaut)
  • success - Alerte à thème vert pour les retours positifs
  • info - Alerte à thème bleu pour les messages informatifs
  • warning - Alerte à thème orange/jaune pour les avertissements
  • error - Alerte à thème rouge pour les erreurs et messages critiques
• Description: Détermine l'apparence visuelle et la signification sémantique de l'alerte

Titre​

• Champ: title
• Type: Saisie de texte
• Requis: Optionnel
• Description: Le texte d'en-tête principal affiché en haut de l'alerte
• Remarque: Supporte la traduction en utilisant le filtre SF_translate

Description​

• Champ: description
• Type: Zone de texte
• Requis: Optionnel
• Description: Le contenu/message principal de l'alerte. Supporte le contenu HTML
• Défaut: "Description..." (espace réservé)

Options d'Affichage​

Fermable​

• Champ: closable
• Type: Interrupteur (booléen)
• Défaut: false
• Description: Lorsqu'activé, affiche un bouton de fermeture permettant aux utilisateurs de fermer l'alerte

Afficher l'Icône​

• Champ: showIcon
• Type: Interrupteur (booléen)
• Défaut: false
• Description: Lorsqu'activé, affiche une icône contextuelle basée sur le type d'alerte (info, success, warning, error)

Centrer​

• Champ: center
• Type: Interrupteur (booléen)
• Défaut: false
• Description: Centre le contenu de l'alerte horizontalement

Thème/Effet​

• Champ: effect
• Type: Sélection déroulante
• Options:
  • light - Thème clair avec arrière-plan subtil
  • dark - Thème sombre avec arrière-plan audacieux
• Défaut: light
• Description: Contrôle l'intensité visuelle et le style de l'arrière-plan de l'alerte

Interface de Configuration​

Lors de la configuration du widget Alerte dans la plateforme low-code, vous trouverez ces options dans la section Global du panneau de configuration du widget :

Configuration Étape par Étape​

1. Sélectionner le Type d'Alerte

   • Choisissez dans la liste déroulante : Primary, Success, Info, Warning ou Error
   • Cela détermine le schéma de couleurs et l'icône par défaut

2. Définir les Options d'Affichage

   • Activez Fermable pour permettre aux utilisateurs de fermer l'alerte
   • Activez Afficher l'Icône pour afficher des icônes contextuelles
   • Activez Centrer pour centrer le contenu
   • Sélectionnez Thème (Clair/Sombre) pour l'intensité visuelle

3. Ajouter du Contenu

   • Saisissez un Titre pour l'en-tête de l'alerte
   • Ajoutez le texte de Description pour le corps du message principal

Exemples d'Utilisation​

Alerte d'Information de Base​

Notification de Succès​

Alerte d'Erreur​

Alerte d'Avertissement​

Styles et Thèmes​

Thème Principal​

Lors de l'utilisation de type: "primary", l'alerte applique automatiquement la classe CSS primary-theme-alert pour une intégration de style personnalisée avec le thème de votre application.

Personnalisation Visuelle​

• Effet Clair: Arrière-plan subtil avec texte standard
• Effet Sombre: Arrière-plan audacieux avec texte à contraste élevé
• Icônes: Sélectionnées automatiquement en fonction du type d'alerte lorsque showIcon est activé
• Centrage: L'alignement du contenu peut être contrôlé avec l'option center

Événements et Interactions​

Bien que non explicitement configurés dans l'interface, le widget Alerte prend en charge les événements suivants au niveau du composant :

• onClose: Déclenché lorsque l'alerte est fermée (si fermable)
• onShow: Déclenché lorsque l'alerte est affichée

Bonnes Pratiques​

Quand Utiliser Chaque Type​

• Info: Informations générales, conseils ou notifications neutres
• Success: Opérations réussies, confirmations, retours positifs
• Warning: Mises en garde, problèmes non critiques, avis importants
• Error: Échecs, problèmes critiques, erreurs de validation
• Primary: Alertes spécifiques à la marque ou messages à thème personnalisé

Considérations d'Accessibilité​

• Utilisez des titres et descriptions clairs et concis
• Assurez-vous que la couleur n'est pas le seul moyen de transmettre le sens (utilisez des icônes)
• Testez avec des lecteurs d'écran lors de l'utilisation de HTML complexe dans les descriptions
• Considérez le délai de fermeture automatique pour les alertes fermables

Directives de Conception​

• Gardez les messages brefs et exploitables
• Utilisez des types d'alertes cohérents dans toute votre application
• Considérez la hiérarchie visuelle lors du placement des alertes
• Utilisez des alertes fermables pour les informations non critiques
• Réservez les alertes non fermables pour les messages système critiques

Intégration avec d'Autres Widgets​

Le widget Alerte peut être efficacement combiné avec :

• Formulaires: Pour les retours de validation et les confirmations de soumission
• Boutons: Pour afficher les résultats des actions
• Tableaux de Données: Pour les messages de statut des opérations
• Modales/Popups: Pour les notifications contextuelles dans les dialogues

Implémentation Technique​

Le widget Alerte est implémenté en utilisant :

• Interface Utilisateur: Element UI (composant el-alert)
• Moteur de Modèle: EJS pour le rendu côté serveur
• Style: Classes CSS avec support de thème
• Localisation: Support de traduction intégré via SF_translate

Ce widget s'intègre parfaitement avec les systèmes de validation de formulaire, de gestion d'état et de thématisation de la plateforme.