Documentation du Widget Image

Le widget Image est un composant de section héroïque polyvalent conçu pour créer des zones de bannière attrayantes avec des images de fond, des titres et des descriptions. C'est idéal pour créer des sections d'appel à l'action proéminentes, des zones de contenu en vedette ou des en-têtes de page.

Aperçu​

Le widget Image affiche un grand conteneur rectangulaire avec:

• Une image de fond qui couvre toute la zone
• Contenu textuel superposé (titre et description)
• Dimensions et alignement personnalisables
• Capacités de conception réactive
• Contrôle complet du style

Options de Configuration​

Paramètres Globaux​

Propriétés de Base​

• Nom: Un nom descriptif pour votre widget image
• Variable/Modèle: Le nom de la variable du modèle de données qui stockera les données associées

Configuration du Contenu​

Titre​

• Type de Champ: Saisie de texte
• Description: Le texte du titre principal affiché de manière proéminente sur l'image
• Utilisation: Entrez le message principal ou le texte d'appel à l'action
• Traduction: Supporte l'internationalisation via les clés de traduction

Description​

• Type de Champ: Zone de texte
• Description: Texte secondaire qui apparaît sous le titre
• Utilisation: Fournissez un contexte supplémentaire, des détails ou des informations justificatives
• Traduction: Supporte l'internationalisation via les clés de traduction

Image de Fond​

• Type de Champ: Téléchargement de fichier
• Description: L'image de fond qui couvre toute la zone d'image
• Exigences:
  • Formats d'image: JPG, PNG, GIF, WebP
  • Résolution recommandée: Haute résolution pour un affichage net
  • L'image sera automatiquement redimensionnée pour couvrir le conteneur complet
• Processus de Téléchargement: Utilisez le bouton "Télécharger le Fond" pour sélectionner et télécharger votre image

Disposition et Dimensions​

Largeur​

• Type de Champ: Saisie de texte
• Par défaut: 100%
• Description: Contrôle la taille horizontale de l'image
• Valeurs Acceptées:
  • Valeurs de pourcentage (par ex., "100%", "75%")
  • Valeurs en pixels (par ex., "800px")
  • Unités CSS (em, rem, vw)
• Exemple: "50%" pour un conteneur de demi-largeur

Hauteur​

• Type de Champ: Saisie de texte
• Par défaut: 400px
• Description: Contrôle la taille verticale de l'image
• Valeurs Acceptées:
  • Valeurs en pixels (par ex., "400px", "600px")
  • Unités de viewport (par ex., "50vh")
  • Autres unités CSS
• Exemple: "400px" pour une image de 400 pixels de hauteur

Justifier (Alignement Horizontal)​

• Type de Champ: Sélection déroulante
• Description: Contrôle le positionnement horizontal du contenu dans l'image
• Options:
  • Début: Aligne le contenu à gauche
  • Centre: Centre le contenu horizontalement (par défaut pour la plupart des designs)
  • Fin: Aligne le contenu à droite

Aligner (Alignement Vertical)​

• Type de Champ: Sélection déroulante
• Description: Contrôle le positionnement vertical du contenu dans l'image
• Options:
  • Début: Aligne le contenu en haut
  • Centre: Centre le contenu verticalement (recommandé pour un design équilibré)
  • Fin: Aligne le contenu en bas

Validation et Visibilité​

Validation Basée sur l'Écran​

Configurez différents comportements sur plusieurs types d'écran:

• Disponible: Si le widget apparaît sur des écrans spécifiques
• Visible: Contrôle la visibilité avec support pour la logique conditionnelle
• Requis: Rend le widget obligatoire (si applicable)
• Désactiver: Empêche l'interaction (si applicable)

Conditions de Visibilité Avancées​

• Utilisez des expressions JavaScript pour la visibilité dynamique
• Accédez à d'autres variables de formulaire en utilisant la syntaxe {{variableName}}
• Créez une logique conditionnelle complexe basée sur l'entrée utilisateur ou l'état de l'application

Configuration du Style​

Classes CSS​

• Classes Statiques: Ajoutez des noms de classes CSS personnalisés pour le style
• Classes Dynamiques: Utilisez des expressions JavaScript pour appliquer les classes conditionnellement
• Noms de Classes: Liste de classes CSS séparées par des espaces

Style Personnalisé​

• Le widget hérite du style global de l'interface
• Un style supplémentaire peut être appliqué par le biais de classes CSS personnalisées
• Le comportement réactif peut être contrôlé par les requêtes médias CSS

Exemples d'Utilisation​

Section Héroïque de Base​

Titre: "Bienvenue sur Notre Plateforme"
Description: "Découvrez des fonctionnalités incroyables et augmentez votre productivité"
Largeur: "100%"
Hauteur: "500px"
Justifier: "centre"
Aligner: "centre"

Bannière d'Appel à l'Action​

Titre: "Commencez Votre Essai Gratuit Aujourd'hui"
Description: "Rejoignez des milliers de clients satisfaits et transformez votre flux de travail"
Largeur: "100%"
Hauteur: "350px"
Justifier: "début"
Aligner: "centre"

Mise en Avant des Fonctionnalités​

Titre: "Tableau de Bord Analytique Puissant"
Description: "Obtenez des informations qui comptent avec nos outils de rapports avancés"
Largeur: "75%"
Hauteur: "400px"
Justifier: "centre"
Aligner: "fin"

Meilleures Pratiques​

Directives de Contenu​

• Titre: Gardez les titres concis et percutants (5-8 mots généralement les meilleurs)
• Description: Limitez les descriptions à 1-2 phrases pour une lisibilité optimale
• Contraste: Assurez-vous que le texte reste lisible sur votre image de fond

Sélection d'Image​

• Qualité: Utilisez des images haute résolution (au moins 1920px de large pour les images pleine largeur)
• Sujet: Choisissez des images qui ne rivalisent pas avec le texte pour l'attention
• Format: Optimisez les images pour le web (utilisez une compression appropriée)
• Secours: Considérez comment le composant se présente sans image lors du chargement

Conception Réactive​

• Hauteur: Utilisez les unités relatives (vh, %) pour une meilleure réactivité mobile
• Largeur: Considérez comment votre image s'adapte à différentes tailles d'écran
• Texte: Assurez-vous que le texte reste lisible sur les appareils mobiles

Considérations de Performance​

• Taille de l'Image: Optimisez les images de fond pour équilibrer la qualité et le temps de chargement
• Chargement: Envisagez le chargement paresseux pour les images sous le pli
• Mise en Cache: Utilisez des stratégies de mise en cache appropriées pour les images de fond

Conseils d'Intégration​

Liaison des Variables​

• Connectez l'image aux modèles de données lorsque le contenu doit être dynamique
• Utilisez le champ Variable/Modèle pour vous lier aux sources de données
• Accédez au contenu dynamique par le biais du système de modèle

Affichage Conditionnel​

• Utilisez les règles de validation pour afficher/masquer les images en fonction des rôles utilisateur
• Mettez en œuvre la visibilité spécifique à l'écran pour différents types d'appareils
• Créez du contenu dynamique en fonction des préférences utilisateur ou de l'état de l'application

Accessibilité​

• Assurez-vous d'un contraste de couleur suffisant entre le texte et l'arrière-plan
• Fournissez un contexte de texte alternatif par le biais d'une structure de titre appropriée
• Tenez compte des utilisateurs ayant une sensibilité de mouvement lors de l'utilisation de fonds animés

Notes Techniques​

Structure Générée​

L'image s'affiche comme un conteneur réactif avec:

• Image de fond positionnée avec mise à l'échelle de couverture
• Conteneur de contenu superposé avec alignement configurable
• Éléments de texte prêts pour la traduction
• Support de classe CSS pour le style personnalisé

Compatibilité des Navigateurs​

• Support des navigateurs modernes pour CSS flexbox et positionnement
• Support de couverture d'image de fond sur tous les navigateurs majeurs
• Comportement réactif par le biais des requêtes médias CSS

Impact sur les Performances​

• Surcharge JavaScript minimale
• Positionnement et style basés sur CSS
• Rendu d'image efficace par l'optimisation du navigateur