Widget Titre

Aperçu#Lien direct vers 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#Lien direct vers Configuration

Paramètres Globaux#Lien direct vers Paramètres Globaux

Nom#Lien direct vers 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#Lien direct vers 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#Lien direct vers Configuration Spécifique au Titre

Niveau#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Contenu Dynamique

Liaison des Modèles#Lien direct vers Liaison des Modèles

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

Configuration du Style#Lien direct vers Configuration du Style

Noms de Classes#Lien direct vers 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#Lien direct vers 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é#Lien direct vers Validation et Visibilité

Configuration Basée sur l'Écran#Lien direct vers 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#Lien direct vers Conditions de Visibilité Avancée

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

Meilleures Pratiques#Lien direct vers Meilleures Pratiques

Structure d'En-tête Sémantique#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Exemples

Titre Statique#Lien direct vers Titre Statique

Titre Dynamique#Lien direct vers Titre Dynamique

Dépannage#Lien direct vers Dépannage

Problèmes Courants#Lien direct vers 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#Lien direct vers 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