Skip to main content

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.

Widget Titre

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
Configuration du Titre

Contenu Dynamique​

Liaison des Modèles​

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

Contenu Dynamique du Titre

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
Style du Titre

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)
Validation de Base du Titre

Conditions de Visibilité Avancée​

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

Validation Avancée du Titre

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​

Exemples de Titres Statiques

Titre Dynamique​

Exemples de Titres Dynamiques

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