Widget Text

Le widget Text est utilisé pour afficher du contenu statique ou dynamique dans votre interface. Il prend en charge le contenu HTML enrichi, la liaison de données dynamique et des options de style complètes.

Aperçu​

Le widget Text s'affiche comme un élément de paragraphe pouvant afficher du texte formaté, du contenu HTML et des valeurs dynamiques de vos modèles de données. Il est hautement configurable et prend en charge les modèles de design réactifs.

Options de Configuration​

Paramètres Globaux​

Propriétés de Base​

• Nom : Un nom descriptif pour votre widget text
• Variable/Modèle : La variable du modèle de données à lier à ce widget (optionnel pour le contenu statique)

Configuration du Contenu​

• Contenu : Éditeur de contenu HTML enrichi pour définir le contenu texte
  • Prend en charge le formatage HTML (gras, italique, listes, liens, etc.)
  • Permet l'interpolation de variables dynamiques en utilisant la syntaxe {{variable_name}}
  • Éditeur WYSIWYG complet avec barre d'outils de formatage

Alignement du Texte​

Configurer comment le contenu texte est aligné dans le widget :

• Gauche : Aligner le texte à gauche (par défaut)
• Centre : Centrer le texte horizontalement
• Droite : Aligner le texte à droite
• Début : Aligner le texte au début (dépendant de la langue)
• Fin : Aligner le texte à la fin (dépendant de la langue)
• Justifier : Justifier le texte avec espacement uniforme

Validation et Visibilité​

Configuration Basée sur l'Écran​

Configurer le comportement du widget sur différents écrans d'interface :

• Disponible : Si le widget est disponible sur chaque écran
• Visible : Contrôler la visibilité avec des valeurs booléennes ou des conditions dynamiques
• Requis : Définir le statut de requis (généralement non applicable pour les widgets text)
• Désactiver : Contrôler si le widget est désactivé ou réduit

Conditions de Visibilité Avancées​

• Utiliser des expressions JavaScript pour la visibilité dynamique
• Référencer d'autres variables de formulaire en utilisant la syntaxe {{variable_name}}
• Prise en charge de la logique conditionnelle complexe

Style et Mise en Page​

Classes CSS​

• Classes Statiques : Ajouter des classes CSS personnalisées pour le style
• Classes Dynamiques : Utiliser des expressions JavaScript pour appliquer des classes conditionnelles
  • Référencer les modèles de données en utilisant models.variable_name
  • Prise en charge de l'application de classe conditionnelle

Dimensions​

• Largeur : Définir la largeur personnalisée (prend en charge les unités CSS : px, %, rem, etc.)
• Hauteur : Définir la hauteur personnalisée (prend en charge les unités CSS : px, %, rem, etc.)

Options de Mise en Page​

• Inline/Block : Choisir entre les modes d'affichage inline et block
• Bordure : Activer/désactiver l'affichage de la bordure

Contenu Dynamique​

Support du Contenu HTML​

L'éditeur de contenu prend en charge le formatage HTML complet :

Meilleures Pratiques​

Organisation du Contenu​

1. Garder le contenu concis : Les widgets text fonctionnent mieux avec des messages ciblés et clairs
2. Utiliser le HTML sémantique : Structurer le contenu avec des balises d'en-tête et des paragraphes appropriés
3. Planifier la réactivité : Considérer comment le texte s'affichera sur différentes tailles d'écran

Considérations de Performance​

1. Optimiser le HTML : Éviter l'imbrication excessive et le balisage complexe
2. Liaison de variable efficace : Ne lier que les variables nécessaires pour réduire la surcharge de traitement
3. Rendu conditionnel : Utiliser les conditions de visibilité pour améliorer la performance

Accessibilité​

1. Balisage sémantique : Utiliser des éléments HTML appropriés pour les lecteurs d'écran
2. Contraste de couleur : Assurer un contraste suffisant pour la lisibilité
3. Taille de police : Utiliser des unités relatives pour une meilleure accessibilité

Implémentation Technique​

Sortie Rendue​

Le widget text génère un élément <p> avec :

• ID unique et référence Vue.js
• Liaison de visibilité conditionnelle
• Classes CSS (statiques et dynamiques)
• Styles inline pour l'alignement et l'espacement
• Contenu traité avec interpolation de variable

Traitement des Variables​

• Les variables sont automatiquement préfixées avec models. dans le processus de rendu
• Prend en charge les propriétés d'objet imbriquées : {{user.profile.avatar}}
• Accès sécurisé aux variables avec chaînage optionnel

Dépannage​

Problèmes Courants​

1. Les variables ne s'affichent pas : S'assurer que les noms de variables correspondent exactement à votre modèle de données
2. Le HTML ne s'affiche pas : Vérifier que le contenu HTML est correctement formaté
3. Le style n'est pas appliqué : Vérifier les noms de classe CSS et les conditions de classe dynamique
4. Problèmes de visibilité : Revoir les conditions de visibilité et les références de variables

Conseils de Débogage​

1. Tester la liaison de variable : Utiliser d'abord des références de variable simples, puis ajouter de la complexité
2. Valider le HTML : S'assurer que le contenu HTML est bien formé
3. Vérifier la console : Rechercher les erreurs JavaScript dans les expressions de classe dynamique
4. Prévisualiser différents écrans : Tester les conditions de visibilité sur tous les écrans configurés

Exemples de Configurations​

Texte Statique Simple​

• Contenu : "Bienvenue dans notre application !"
• Alignement : Centre
• Classe : "welcome-message"

Informations Utilisateur Dynamiques​

• Contenu : <h3>Bonjour, {{user.name}}</h3><p>Dernière connexion : {{user.lastLogin}}</p>
• Alignement : Gauche
• Visibilité : {{user.isLoggedIn}} === true

Style Conditionnel​

• Contenu : "{{notification.message}}"
• Classes Dynamiques : {{notification.type}} === 'error' ? 'text-danger' : 'text-info'
• Alignement : Gauche

Ce système de configuration complet permet au widget Text de répondre à un large éventail de besoins d'affichage de contenu tout en maintenant flexibilité et performance.