Documentation du Widget Grille

Aperçu​

Le Widget Grille est un composant de mise en page flexible qui vous permet de créer des mises en page réactives basées sur des colonnes pour organiser d'autres widgets. Il supporte la conception réactive, la fonctionnalité de formulaire, les boucles, et diverses options de style.

Paramètres Globaux​

Nom​

• Description: Nom d'affichage du widget grille
• Type: Saisie de texte
• Utilisation: Utilisé pour l'identification et peut être affiché en mode réduit

Variable/Modèle​

• Description: Le modèle de données auquel le widget grille se lie
• Type: Saisie de texte
• Requis: Oui (sauf pour certains types de widgets)
• Validation: Doit être un nom de variable valide
• Utilisation: Définit la liaison de données pour le composant grille

Gouttière​

• Description: Espacement entre les colonnes en pixels
• Type: Saisie numérique
• Par défaut: 0
• Utilisation: Contrôle l'espacement horizontal entre les colonnes de la grille

Si vous souhaitez boucler le widget, vous pouvez utiliser l'option Boucle.

Cette option est utilisée pour créer un formulaire séparé de la page principale Formulaire.

Configuration des Colonnes​

Ajout de Colonnes​

1. Accédez à la section "Colonnes" dans la configuration du widget
2. Cliquez sur "Ajouter une Colonne" pour créer une nouvelle colonne
3. Configurez l'envergure de la colonne et les points d'arrêt réactifs

Propriétés des Colonnes​

Envergure​

• Description: Largeur de colonne par défaut (sur 24 unités totales de grille)
• Type: Saisie numérique
• Plage: 1-24
• Utilisation: Définit la largeur de la colonne sur les écrans de taille moyenne et plus grands

Points d'Arrêt Réactifs​

Chaque colonne supporte la conception réactive avec les points d'arrêt suivants:

• xs (Extra Petit): Téléphones mobiles (< 768px)
• sm (Petit): Tablettes (≥ 768px)
• md (Moyen): Petits ordinateurs portables (≥ 992px)
• lg (Grand): Ordinateurs portables (≥ 1200px)
• xl (Extra Grand): Grands écrans (≥ 1920px)

Configuration:

1. Cliquez sur le bouton d'expansion (flèche) à côté d'une colonne
2. Entrez les valeurs pour chaque point d'arrêt
3. Si laissé vide, le système utilisera la valeur d'envergure par défaut

Gestion des Colonnes​

• Réorganiser: Glissez les colonnes à l'aide de la poignée de grippage (≡ icône)
• Supprimer: Cliquez sur le bouton moins (-) pour supprimer une colonne
• Développer: Cliquez sur le bouton flèche pour afficher les entrées des points d'arrêt réactifs

Validation​

Le widget grille supporte la validation sur différents contextes d'écran:

Validation Basée sur l'Écran​

Pour chaque écran/contexte, vous pouvez configurer:

• Disponible: Si le widget existe dans ce contexte
• Visible: Si le widget est visible (supporte les conditions)
• Requis: Si le widget est requis (pour les contextes applicables)
• Désactiver: Si le widget est désactivé

Conditions Avancées​

Mise en Page et Style​

Justifier le Contenu​

• Options: Début, Fin, Centre, Espace Autour, Espace Entre
• Utilisation: Contrôle l'alignement horizontal des colonnes dans la grille
• Par défaut: Début

Aligner les Éléments​

• Options: Haut, Milieu, Bas
• Utilisation: Contrôle l'alignement vertical du contenu dans les colonnes
• Par défaut: Haut

Effets Visuels​

Ombragé​

• Type: Commutateur à bascule
• Utilisation: Ajoute un effet d'ombre au conteneur de grille
• Remarque: Ne s'applique pas lorsque l'effondrement est activé

Fixe​

• Type: Commutateur à bascule
• Utilisation: Rend la position de la grille fixe sur la page

Effondrement​

• Type: Commutateur à bascule
• Utilisation: Rend la grille réductible avec le nom du widget comme en-tête

Classes Personnalisées​

Classes Statiques​

• Champ: Classe
• Type: Saisie de texte
• Utilisation: Ajoutez les noms des classes CSS séparés par des virgules
• Exemple: custom-grid, highlighted

Classes Dynamiques​

• Accès: Cliquez sur l'icône du pinceau à côté du champ Classe
• Utilisation: Écrivez des expressions JavaScript qui retournent les noms des classes
• Contexte: Accédez aux données du modèle en utilisant le préfixe models.
• Exemple: models.status === 'active' ? 'active-grid' : 'inactive-grid'

Meilleures Pratiques​

Conception des Colonnes​

1. Planifier pour Mobile: Configurez toujours les points d'arrêt xs pour la compatibilité mobile
2. Utiliser le Système à 24 Unités: Les envergures totales des colonnes doivent totaliser 24 pour la pleine largeur
3. Amélioration Progressive: Commencez par mobile (xs) et améliorez pour les grands écrans

Considérations de Performance​

2. Optimiser les Widgets Imbriqués: Évitez les structures de grille profondément imbriquées
3. Validation Efficace: Utilisez des conditions booléennes simples si possible

Accessibilité​

1. Noms Significatifs: Utilisez des noms descriptifs pour les lecteurs d'écran
2. Ordre de Tabulation Logique: Assurez-vous d'une navigation au clavier appropriée
3. Contraste des Couleurs: Assurez-vous d'un contraste suffisant pour les éléments ombragés

Dépannage​

Problèmes Courants​

1. Colonnes Non Réactives: Vérifiez que les points d'arrêt réactifs sont configurés
2. Débordement de Contenu: Assurez-vous que les envergures des colonnes ne dépassent pas 24 au total

Conseils de Débogage​

1. Utilisez les outils de développement du navigateur pour inspecter les classes de colonnes
2. Vérifiez la console pour les erreurs JavaScript dans les conditions personnalisées
3. Vérifiez que la structure des données du modèle correspond au format attendu
4. Testez le comportement réactif à différentes tailles d'écran

Notes d'Intégration​

• Le widget grille s'intègre automatiquement avec le système de validation de l'interface parent
• Les règles de validation en cascade vers les widgets enfants de manière appropriée