Classes CSS conditionnelles dans Thymeleaf

1. Vue d'ensemble

Dans ce rapide didacticiel, nous allons apprendre quelques façons différentes d'ajouter conditionnellement des classes CSS dans Thymeleaf.

Si vous n'êtes pas familier avec Thymeleaf, nous vous recommandons de consulter notre introduction.

2. Utilisation de th: if

Supposons que notre objectif soit de générer un dont les classes sont déterminées par le serveur:

 I have two classes: "base" and either "condition-true" or "condition-false" depending on a server-side condition. 

Avant que ce code HTML ne soit diffusé, nous avons besoin d'un bon moyen pour le serveur d'évaluer une condition et d'inclure la classe condition-true ou la classe condition-false , ainsi qu'une classe de base .

Lors de la création de modèles HTML, il est assez courant de devoir ajouter une logique conditionnelle pour le comportement dynamique.

Tout d'abord, utilisons th: if pour démontrer la forme la plus simple de logique conditionnelle:

 This HTML is duplicated. We probably want a better solution.   This HTML is duplicated. We probably want a better solution. 

Nous pouvons voir ici que cela entraînera logiquement l'attachement de la classe CSS correcte à notre élément HTML, mais cette solution viole le principe DRY car elle nécessite de dupliquer tout le bloc de code.

L'utilisation de th: if peut certainement être utile dans certains cas, mais nous devrions chercher une autre façon d'ajouter dynamiquement une classe CSS.

3. Utilisation de th: attr

Thymeleaf nous offre un attribut qui nous permettra de définir d'autres attributs, appelés th: attr .

Utilisons-le pour résoudre notre problème:

 This HTML is consolidated, which is good, but the Thymeleaf attribute still has some redundancy in it. 

Vous avez peut-être remarqué que la classe de base est toujours dupliquée. De plus, il existe un attribut Thymeleaf plus spécifique que nous pouvons utiliser lors de la définition des classes.

4. Utilisation de th: class

L' attribut th: class est un raccourci pour th: attr = ”class =…” donc utilisons-le à la place, en séparant la classe de base du résultat de la condition:

 The base CSS class still has to be appended with String concatenation. We can do a little bit better. 

Cette solution est plutôt bonne car elle répond à nos besoins et est SÈCHE. Cependant, il existe encore un autre attribut Thymeleaf dont nous pouvons bénéficier.

5. Utilisation de th: classappend

Ne serait-il pas bien de découpler complètement notre classe de base de la logique conditionnelle? Nous pouvons définir statiquement notre classe de base et réduire la logique conditionnelle aux seuls éléments pertinents:

 This HTML is consolidated, and the conditional class is appended separately from the static base class. 

6. Conclusion

À chaque itération de notre code Thymeleaf, nous avons découvert une technique conditionnelle utile qui pourrait s'avérer utile plus tard. En fin de compte, nous avons constaté que l'utilisation de th: classappend nous fournit la meilleure combinaison de code DRY et de séparation des préoccupations tout en satisfaisant notre objectif.

Tous ces exemples peuvent être vus dans un projet Thymeleaf fonctionnel disponible sur GitHub.