Widget Titre

Aperçu​

Le widget Titre est un composant de titre de texte polyvalent qui vous permet de créer des en-têtes structurés (H1-H6) dans votre interface. Il fournit des options de configuration flexibles pour le style, l'alignement et le rendu du contenu dynamique.

Configuration​

Paramètres Globaux​

Nom​

• Champ: Entrée de nom
• Description: Définit le nom/identifiant interne du widget
• Utilisation: Utilisé pour référencer le widget dans les scripts et actions

Variable/Modèle​

• Champ: Entrée Variable/Modèle
• Description: Lie le widget à un modèle de données ou à une variable
• Utilisation: Active la liaison de contenu dynamique et la synchronisation des données
• Format: Utilisez la notation pointée pour les propriétés imbriquées (par exemple, user.name)

Configuration Spécifique au Titre​

Niveau​

• Champ: Menu déroulant Niveau
• Options: 1, 2, 3, 4, 5, 6
• Description: Détermine le niveau d'en-tête HTML (H1, H2, H3, H4, H5, H6)
• Défaut: H1
• Utilisation:
  • H1: Titres principaux de la page
  • H2: En-têtes de section
  • H3-H6: En-têtes de sous-section

Alignement du Texte​

• Champ: Menu déroulant Aligner le texte
• Options:
  • Centrer: Centre le texte horizontalement
  • Fin: Aligne le texte à la fin (droite dans les langues LTR)
  • Justifier: Justifie le texte avec un espacement uniforme
  • Gauche: Aligne le texte à gauche
  • Droite: Aligne le texte à droite
  • Début: Aligne le texte au début (gauche dans les langues LTR)
• Défaut: Gauche

Contenu du Texte​

• Champ: Zone de texte
• Description: Le contenu réel qui sera affiché
• Fonctionnalités:
  • Supporte le texte brut
  • Supporte les variables dynamiques en utilisant la syntaxe {{variable_name}}
  • Support du texte multiligne
  • Les entités HTML sont automatiquement échappées

Contenu Dynamique​

Liaison des Modèles​

Le widget titre supporte le contenu dynamique grâce à l'interpolation des modèles :

Configuration du Style​

Noms de Classes​

• Champ: Entrée de classe
• Description: Ajoute des classes CSS personnalisées à l'élément titre
• Utilisation: Appliquer un style personnalisé ou des classes de framework
• Exemple: custom-title primary-color

Classes Dynamiques​

• Champ: Bouton Classes dynamiques
• Description: Configurez les classes CSS conditionnelles basées sur les données ou les conditions
• Utilisation: Classes qui changent en fonction de l'état de l'application

Validation et Visibilité​

Configuration Basée sur l'Écran​

Le widget titre supporte différentes configurations pour différents écrans/contextes :

• Disponible: Contrôle si le widget existe dans l'interface
• Visible: Contrôle si le widget est visible pour les utilisateurs
• Requis: Non applicable pour les widgets titre (composant d'affichage uniquement)
• Désactiver: Non applicable pour les widgets titre (composant non interactif)

Conditions de Visibilité Avancée​

Utilisez des expressions JavaScript pour la logique de visibilité complexe :

Meilleures Pratiques​

Structure d'En-tête Sémantique​

• Utilisez H1 pour les titres principaux de la page (un seul par page)
• Utilisez H2-H6 pour la structure du contenu hiérarchique
• Maintenez un ordre logique des en-têtes (ne pas sauter les niveaux)

Directives de Contenu​

• Gardez les titres concis et descriptifs
• Utilisez la casse de phrase plutôt que TOUT EN MAJUSCULES
• Assurez-vous que les titres sont significatifs et accessibles

Conception Responsive​

• Testez l'apparence du titre sur différentes tailles d'écran
• Considérez la longueur du texte pour les affichages mobiles
• Utilisez les niveaux d'en-tête appropriés pour la hiérarchie du contenu

Exemples​

Titre Statique​

Titre Dynamique​

Dépannage​

Problèmes Courants​

1. Titre ne s'affiche pas

   • Vérifiez les conditions de visibilité
   • Vérifiez que les liaisons de variables sont correctes
   • Assurez-vous que le widget est marqué comme « Disponible »

2. Le contenu dynamique ne se met pas à jour

   • Vérifiez que les noms de variables correspondent exactement
   • Vérifiez la connectivité du modèle de données
   • Assurez-vous de la syntaxe correcte de la variable {{variableName}}

3. Problèmes de style

   • Vérifiez que les noms de classes CSS sont corrects
   • Vérifiez les styles en conflit
   • Testez sur différentes tailles d'écran

Conseils de Débogage​

• Utilisez les outils de développement du navigateur pour inspecter le HTML généré
• Vérifiez la console pour les erreurs JavaScript
• Vérifiez la liaison des données dans Vue DevTools