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#Lien direct vers 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#Lien direct vers Propriétés de Configuration

Configuration de Base#Lien direct vers Configuration de Base

Type d'Alerte#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Options d'Affichage

Fermable#Lien direct vers 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#Lien direct vers 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#Lien direct vers Centrer

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

Thème/Effet#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Exemples d'Utilisation

Alerte d'Information de Base#Lien direct vers Alerte d'Information de Base

Notification de Succès#Lien direct vers Notification de Succès

Alerte d'Erreur#Lien direct vers Alerte d'Erreur

Alerte d'Avertissement#Lien direct vers Alerte d'Avertissement

Styles et Thèmes#Lien direct vers Styles et Thèmes

Thème Principal#Lien direct vers 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#Lien direct vers 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#Lien direct vers É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#Lien direct vers Bonnes Pratiques

Quand Utiliser Chaque Type#Lien direct vers 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é#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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.