Styles situationnels
Dernière mise à jour le 23 mars 2026
Les styles situationnels vous permettent de modifier l’apparence d’un élément en fonction de sa position parmi ses éléments frères. Vous pouvez définir des couleurs d’arrière-plan différentes pour les enfants pairs et impairs, mettre en évidence le premier ou le dernier élément, ou afficher un message de remplacement quand une collection est vide (le tout sans écrire une seule ligne de code).
Le sélecteur de situation
Chaque élément dispose d’un menu déroulant Situation en haut du panneau Styles. Par défaut, il est réglé sur « Default », ce qui signifie que les styles définis s’appliquent dans tous les contextes.
Cliquez sur le menu déroulant pour choisir une situation différente. Les styles que vous définissez lorsqu’une situation autre que Default est sélectionnée ne s’appliquent que lorsque la condition correspondante est remplie.
Situations disponibles
Le builder propose six situations :
| Situation | Quand les styles s’appliquent |
|---|---|
| Default | Toujours (ce sont les styles de base de l’élément) |
| When odd | Lorsque l’élément est à une position impaire (1er, 3e, 5e…) parmi ses frères |
| When even | Lorsque l’élément est à une position paire (2e, 4e, 6e…) parmi ses frères |
| When first | Uniquement pour le premier enfant parmi ses frères |
| When last | Uniquement pour le dernier enfant parmi ses frères |
| When empty | Lorsque l’élément n’a aucun enfant visible |
Définir des styles situationnels
- Sélectionnez un élément sur le canevas.
- Ouvrez l’onglet Styles dans le panneau de droite.
- Choisissez une situation dans le menu déroulant Situation (par exemple, « When even »).
- Définissez les styles souhaités pour cette situation (couleur d’arrière-plan, couleur du texte, bordures, ou toute autre propriété de style).
- Revenez à « Default » pour continuer à éditer les styles de base.
Les styles définis sous une situation autre que Default agissent comme des surcharges. Ils remplacent les styles par défaut correspondants uniquement lorsque la condition est remplie. Les propriétés non définies dans un contexte situationnel conservent leurs valeurs par défaut.
L’indicateur de surcharge
Lorsqu’un élément a des styles définis pour une situation autre que Default, un petit point indigo apparaît à côté du menu déroulant Situation. Cet indicateur visuel vous aide à repérer les éléments disposant de surcharges situationnelles sans avoir à parcourir chaque situation manuellement.
En survolant le point, une infobulle indique quelles situations ont des surcharges définies.
Cas d’utilisation courants
Alternance de couleurs de lignes
L’utilisation la plus courante des styles situationnels est l’alternance de couleurs (effet zèbre) dans une liste répétée :
- Créez un conteneur et activez la Répétition dessus (par exemple, sur
invoice.items). - Définissez l’arrière-plan Default sur blanc.
- Passez à When even et définissez l’arrière-plan sur un gris clair.
Chaque ligne générée alterne automatiquement entre blanc et gris.
Mise en évidence du dernier élément
Pour ajouter une bordure inférieure uniquement au dernier élément d’une liste :
- Sélectionnez l’élément répété.
- Passez à When last.
- Ajoutez une bordure inférieure.
Contenu de remplacement pour collection vide
Pour afficher un message quand une collection ne contient aucun élément :
- Créez un conteneur avec la Répétition activée sur la collection.
- À l’intérieur, ajoutez le contenu qui doit se répéter.
- Sélectionnez le conteneur répété lui-même.
- Passez à When empty.
- Définissez des styles qui rendent le contenu d’état vide visible (par exemple, une hauteur minimale et un texte centré).
Combinaison avec conditions et boucles
Les styles situationnels fonctionnent de pair avec les fonctionnalités Conditions et boucles. Un schéma typique est :
- Configurez la Répétition sur un conteneur pour boucler sur une collection de données.
- Appliquez des styles situationnels sur l’élément répété ou ses enfants pour varier l’apparence.
- Ajoutez éventuellement des conditions de visibilité sur les éléments enfants à l’intérieur de la boucle pour afficher ou masquer du contenu spécifique par élément.
Cette combinaison couvre la plupart des besoins de mise en page dynamique sans écrire de CSS personnalisée.
Questions fréquentes
- Comment créer des rangées zébrées dans un modèle builder PDFMonkey ?
- Activez la Repetition sur un Container, définissez l’arrière-plan Default en blanc, puis basculez le menu déroulant Situation sur « When even » et définissez cet arrière-plan en gris clair. Chaque rangée répétée alterne automatiquement les couleurs.
- Quels styles situationnels sont disponibles dans le builder PDFMonkey ?
- Le builder propose six situations : Default (toujours), When odd, When even, When first, When last et When empty. Chacune permet de surcharger les styles en fonction de la position de l’élément parmi ses frères ou selon qu’il possède des enfants visibles.
- Comment afficher un message de remplacement quand une collection répétée est vide ?
- Sélectionnez le Container avec la Repetition activée, basculez le menu déroulant Situation sur « When empty » et définissez des styles rendant le contenu de l’état vide visible. Ajoutez un bloc Text enfant à l’intérieur avec votre message de remplacement, par exemple « Aucun élément à afficher ».