Skip to main content

Documentation du Widget Espaceur

Aperçu​

Le widget Espaceur est un utilitaire de mise en page non interactif utilisé pour ajouter un espace vertical entre les composants de l'interface. Il fournit un contrôle d'espacement cohérent tout en supportant la visibilité dynamique et le style.

Spacer Widget

Configuration de Base​

Paramètres Globaux​

Nom​

  • Champ: Nom
  • Description: Nom d'affichage du widget dans le générateur d'interface
  • Type: Saisie de texte
  • Requis: Oui

Variable/Modèle​

  • Champ: Variable/Modèle
  • Description: Non applicable – L'espaceur ne se lie pas à un modèle
  • Type: N/A
  • Requis: Non
Spacer Configuration

Validation​

  • Disponible: Contrôle si le widget est disponible sur l'écran
  • Visibilité: Contrôle si l'espaceur est affiché
  • Requis: Non applicable
  • Désactiver: Non applicable
Spacer Validation

Style​

Options de Mise en Page​

  • Largeur: Héritée du conteneur parent
  • Hauteur: Configurable via les paramètres du widget
  • Classe: Ajouter des classes CSS personnalisées pour un style supplémentaire

Classes Dynamiques​

Les classes dynamiques peuvent être appliquées en utilisant la configuration :

{
  "hidden": "{{isMobile}}",
  "highlight": "{{isImportant}}"
}
Spacer Styling

Meilleures Pratiques​

  1. Utilisez uniquement si nécessaire – Préférez la marge/remplissage pour un espacement simple
  2. Gardez les tailles cohérentes – Appliquez les valeurs d'espacement standard dans l'interface
  3. Conception responsive – Utilisez des unités relatives (vh, %, em) pour cibler plusieurs tailles d'écran
  4. Combinez avec des mises en page – Fonctionne mieux lorsqu'il est utilisé dans des conteneurs de grille ou de ligne

Considérations d'Accessibilité​

  • L'espaceur n'a aucun impact sur les outils d'accessibilité
  • Ignoré par les lecteurs d'écran
  • N'affecte pas la navigation au clavier

Conseils de Performance​

  • Très léger, coût de rendu minimal
  • Utilisez les tailles statiques lorsque possible pour des mises en page prévisibles

Dépannage​

L'espaceur n'est pas visible

  • Vérifiez que la propriété visible est définie sur true
  • Assurez-vous que la hauteur est configurée avec des unités CSS valides

Taille inattendue

  • Vérifiez que le style du conteneur ne remplace pas la hauteur de l'espaceur
  • Inspectez le CSS calculé avec les outils de développement

La classe n'est pas appliquée

  • Supprimez les virgules dans les noms de classe
  • Assurez-vous que les définitions de classe CSS existent