Widget Séparateur

Aperçu​

Le widget Séparateur est un composant de séparation visuelle qui aide à organiser et structurer votre interface en créant des divisions claires entre différentes sections de contenu. Il s'affiche sous la forme d'une ligne horizontale avec une étiquette de texte optionnelle qui peut être positionnée et stylisée selon vos besoins.

Paramètres Globaux​

Nom du Widget​

• Champ : Nom
• Description : Le texte d'affichage qui apparaîtra sur le séparateur
• Utilisation : Saisissez le texte que vous souhaitez afficher sur la ligne de séparation
• Exemple : "Informations Personnelles", "Coordonnées", "Paramètres"

Variable/Modèle​

• Champ : Variable/Modèle
• Description : Nom de variable optionnel pour l'accès programmatique au widget
• Utilisation : Définissez un identifiant unique si vous devez référencer ce séparateur dans des scripts ou des règles de validation
• Exemple : section_divider, contact_separator

Validation et Visibilité​

Le widget Séparateur prend en charge les règles de validation basées sur l'écran qui contrôlent quand et comment le widget apparaît sur différents écrans de l'interface.

Configuration d'Écran​

Disponible​

• Description : Contrôle si le widget existe sur des écrans spécifiques
• Options : Activer/désactiver pour chaque écran
• Cas d'utilisation : Afficher les séparateurs uniquement sur certains formulaires ou vues

Visible​

• Description : Contrôle la visibilité du widget
• Options :
  • Mode Simple : Activer/désactiver
  • Mode Avancé : Condition JavaScript
• Exemples Avancés :
  • {{user.hasPermission('view_advanced')}} - Afficher uniquement pour les utilisateurs avec des permissions spécifiques
  • {{formData.section === 'extended'}} - Afficher en fonction de l'état du formulaire
  • {{models.showDetails}} - Afficher en fonction de la valeur de la variable

Requis​

• Description : Généralement non applicable aux séparateurs (éléments visuels)
• Utilisation : Généralement laissé désactivé pour les widgets séparateurs

Désactiver​

• Description : Contrôle si le séparateur apparaît désactivé/grisé
• Utilisation : Rarement utilisé pour les séparateurs mais disponible pour des besoins de style spéciaux

Conditions de Visibilité Avancées​

Lors de l'utilisation des paramètres avancés, vous pouvez écrire des expressions JavaScript en utilisant :

• Variables : Accéder à n'importe quelle variable d'interface en utilisant {{variableName}}
• Données de Formulaire : Référencer les champs de formulaire et leurs valeurs
• Contexte Utilisateur : Accéder aux informations et permissions de l'utilisateur
• État Global : Référencer les variables à l'échelle de l'application

Exemples de Conditions :

Style et Apparence​

Position du Contenu​

• Par Défaut : Aligné à gauche
• Description : Le texte du séparateur est positionné à gauche de la ligne par défaut
• Personnalisation : Peut être modifié via des classes CSS

Classes CSS​

• Champ : Classe
• Description : Ajouter des classes CSS personnalisées pour styliser l'apparence du séparateur
• Utilisation :
  • Saisir les noms de classe séparés par des espaces
  • Utiliser les classes de thème existantes ou du CSS personnalisé
• Exemples :
  • primary-divider - Appliquer le style du thème principal
  • bold-text large-spacing - Plusieurs classes pour du texte en gras et un espacement supplémentaire
  • center-divider - Classe personnalisée pour centrer le texte

Classes Dynamiques​

• Fonctionnalité : Attribution de classe dynamique basée sur des conditions
• Accès : Cliquez sur l'icône de pinceau à côté du champ Classe
• Utilisation : Écrire des expressions JavaScript qui retournent des noms de classe basés sur les données ou l'état
• Exemple : {{user.role === 'admin' ? 'admin-divider' : 'user-divider'}}

Détails d'Implémentation​

Structure du Widget​

Le widget Séparateur génère un composant séparateur Element UI avec les caractéristiques suivantes :

• Type d'Élément : el-divider
• Position du Contenu : Aligné à gauche par défaut
• Contenu Texte : Traduit automatiquement en utilisant le système de traduction de l'interface
• Rendu Conditionnel : Respecte les paramètres de visibilité
• Intégration CSS : Prend en charge l'attribution de classe statique et dynamique

Support de Traduction​

• Le texte du séparateur est automatiquement traité via le système de traduction
• Utiliser des clés de traduction dans le nom du widget pour le support multilingue
• Le système traduira automatiquement le texte en fonction du paramètre de langue actuel

Comportement Responsive​

• Le séparateur s'adapte automatiquement à la largeur du conteneur
• Le positionnement et le style du texte répondent aux points de rupture CSS
• Adapté aux mobiles par défaut avec une conception responsive Element UI appropriée

Bonnes Pratiques​

Convention de Nommage​

• Utiliser des noms descriptifs qui indiquent clairement la section divisée
• Envisager d'utiliser des clés de traduction pour les interfaces multilingues
• Garder les noms concis mais significatifs

Hiérarchie Visuelle​

• Utiliser les séparateurs avec parcimonie pour maintenir une conception épurée
• Envisager d'utiliser différents styles pour différents niveaux de séparation
• Assurer un espacement suffisant autour des séparateurs pour la clarté visuelle

Accessibilité​

• Le texte du séparateur fournit une signification sémantique pour les lecteurs d'écran
• Utiliser des noms de section significatifs pour améliorer la navigation des technologies d'assistance
• Assurer que le contraste des couleurs respecte les normes d'accessibilité lors de l'application de styles personnalisés

Considérations de Performance​

• Les séparateurs ont un impact minimal sur les performances
• Les conditions de visibilité complexes doivent être optimisées pour les performances
• Éviter les expressions de condition profondément imbriquées lorsque c'est possible

Cas d'Utilisation Courants​

Séparation de Section de Formulaire​

Dépannage​

Le Séparateur N'Apparaît Pas​

• Vérifier les conditions de visibilité dans les paramètres de validation
• Vérifier que le widget est marqué comme "Disponible" pour l'écran actuel
• Assurer que le conteneur a une largeur suffisante pour afficher le séparateur

Le Texte Ne S'Affiche Pas​

• Vérifier que le nom du widget est correctement défini
• Vérifier les problèmes de traduction si vous utilisez des clés de traduction
• Assurer que les classes CSS ne cachent pas le contenu texte

Problèmes de Style​

• Vérifier que les noms de classe CSS sont corrects et disponibles
• Vérifier les conflits CSS avec d'autres styles
• Assurer que les expressions de classe dynamique retournent des noms de classe valides

Les Conditions de Visibilité Ne Fonctionnent Pas​

• Valider la syntaxe JavaScript dans les conditions de visibilité avancées
• Assurer que les variables référencées existent et sont accessibles
• Tester les conditions dans la console du navigateur pour le débogage