Widget Fenêtre Contextuelle

Le widget Fenêtre Contextuelle crée une boîte de dialogue modale qui affiche du contenu au-dessus de l'interface principale. Il est construit à l'aide du composant dialog d'Element UI et offre de nombreuses options de personnalisation pour l'affichage du contenu, les règles de validation et les interactions utilisateur.

Configuration de Base​

Paramètres Globaux​

Nom

• Le nom d'affichage du widget fenêtre contextuelle
• Utilisé pour l'identification et la référence au sein de l'interface

Variable/Modèle

• Définit la liaison du modèle de données pour la fenêtre contextuelle
• Contrôle l'état de visibilité et le contexte de données de la fenêtre contextuelle
• Format : variableName ou model.property

Gestion du Contenu​

Propriétés de la Boîte de Dialogue​

Titre

• Définit le texte d'en-tête affiché en haut de la fenêtre contextuelle
• Prend en charge la traduction à l'aide du filtre SF_translate
• Peut inclure du contenu dynamique en utilisant l'interpolation de variables

Structure du Contenu

• Les fenêtres contextuelles contiennent un système de disposition en grille (el-row/el-col)
• Peuvent inclure n'importe quelle combinaison de widgets : formulaires, tableaux, boutons, texte, etc.
• Les widgets sont rendus en fonction de leurs règles de validation individuelles

Prise en Charge des Widgets Imbriqués​

La fenêtre contextuelle agit comme un conteneur pour d'autres widgets :

• Dispositions en grille pour l'organisation structurée du contenu
• Éléments de formulaire (entrées, sélections, cases à cocher, etc.)
• Widgets d'affichage (texte, titres, images, tableaux)
• Widgets interactifs (boutons, tiroirs, autres fenêtres contextuelles)

Visibilité et Validation​

Validation Basée sur les Écrans​

Configurez différents comportements sur plusieurs écrans/contextes :

Disponible

• Contrôle si la fenêtre contextuelle est disponible dans des écrans spécifiques
• Valeur booléenne : true ou false

Visible

• Contrôle la visibilité de la fenêtre contextuelle avec prise en charge de conditions avancées
• Options :
  • Booléen simple : true ou false
  • Conditions dynamiques utilisant des variables : {{variableName}}
  • Expressions complexes : {{user.role}} === 'admin' && {{status}} === 'active'

Requis

• Définit si l'interaction avec la fenêtre contextuelle est obligatoire
• Hérite des règles de validation pour les éléments de formulaire contenus

Désactiver

• Contrôle si la fenêtre contextuelle peut être ouverte/utilisée
• Prend en charge une logique conditionnelle similaire à la visibilité

Conditions de Visibilité Avancées​

Références de Variables

• Utilisez {{variableName}} pour les conditions dynamiques
• Accédez aux propriétés imbriquées : {{user.profile.role}}
• Prise en charge des opérateurs de comparaison : ===, !==, >, <, >=, <=

Conditions Complexes

Style et Disposition​

Style de Base​

Noms de Classes

• Classes CSS statiques : custom-popup large-modal
• Classes dynamiques utilisant des conditions :

Taille et Positionnement

• Largeur : Définir la largeur de la fenêtre contextuelle (pixels, pourcentages ou unités CSS)
• Hauteur : Définir les contraintes de hauteur de la fenêtre contextuelle
• La fenêtre contextuelle se centre automatiquement à l'écran

Paramètres de Comportement​

Fermer au Clic Externe

• Ne pas fermer au clic sur le masque : Empêche la fermeture lors d'un clic à l'extérieur
• Par défaut : false (permet la fermeture en cliquant sur l'arrière-plan)
• Définir sur true pour exiger une action de fermeture explicite

Comportement Modal

• Bloque l'interaction avec le contenu en arrière-plan
• Fournit un effet de superposition/arrière-plan
• Prise en charge de la navigation au clavier (ESC pour fermer)

Gestion des Événements​

Événements de la Fenêtre Contextuelle​

À la Fermeture

• Déclenché lorsque la fenêtre contextuelle est fermée (toute méthode)
• Peut exécuter des fonctions JavaScript personnalisées
• Accès au contexte de données de la fenêtre contextuelle

Changements de Visibilité

• Déclenchement automatique des événements lors de l'affichage/masquage
• Intégration avec le cycle de vie du composant parent

Événements des Widgets​

Les widgets imbriqués conservent leurs gestionnaires d'événements individuels :

• Clics sur les boutons
• Soumissions de formulaires
• Modifications de données
• Événements de validation

Bonnes Pratiques​

Optimisation des Performances​

• Utilisez des conditions de visibilité spécifiques pour éviter les rendus inutiles
• Implémentez un nettoyage approprié des données à la fermeture
• Minimisez la complexité des widgets imbriqués

Expérience Utilisateur​

• Fournissez des mécanismes de fermeture clairs (boutons, touche ESC)
• Utilisez des tailles appropriées pour le contenu
• Implémentez des états de chargement pour les opérations asynchrones

Accessibilité​

• Assurez-vous que la navigation au clavier fonctionne correctement
• Fournissez des étiquettes ARIA appropriées
• Maintenez la gestion du focus

Intégrité des Données​

• Validez les données du formulaire avant la fermeture
• Gérez les modifications non enregistrées de manière appropriée
• Fournissez une confirmation pour les actions destructives

Modèles d'Intégration​

Avec les Tableaux​

• Fenêtres contextuelles d'action de ligne pour les détails/édition
• Confirmations d'opérations en bloc
• Interfaces de filtrage/recherche

Avec les Formulaires​

• Assistants multi-étapes
• Sections de saisie détaillées
• Interfaces de téléchargement de fichiers

Avec la Navigation​

• Menus contextuels
• Systèmes d'aide
• Panneaux de paramètres

Le widget Fenêtre Contextuelle fournit une base puissante pour créer des expériences modales riches et interactives tout en maintenant une séparation claire entre le contenu et la logique de présentation.