Skip to main content

Documentation du Widget Espaceur

AperçuLien direct vers 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 BaseLien direct vers Configuration de Base

Paramètres GlobauxLien direct vers Paramètres Globaux

NomLien direct vers Nom

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

Variable/ModèleLien direct vers 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

ValidationLien direct vers 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

StyleLien direct vers Style

Options de Mise en PageLien direct vers 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 DynamiquesLien direct vers Classes Dynamiques

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

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

Meilleures PratiquesLien direct vers 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éLien direct vers 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 PerformanceLien direct vers 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épannageLien direct vers 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