Thymeleaf: comment utiliser des conditions pour ajouter / supprimer dynamiquement une classe CSS

En utilisant Thymeleaf comme moteur de template, est-il possible d'ajouter / supprimer dynamiquement une classe CSS vers / depuis un simple divavec la th:ifclause?

Normalement, je pourrais utiliser la clause conditionnelle comme suit:

<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a> 

Nous allons créer un lien vers la page lorem ipsum , mais seulement si la clause condition est vraie.

Je cherche quelque chose de différent: j'aimerais que le bloc soit toujours visible, mais avec des classes variables en fonction de la situation.

Il y a aussi th:classappend.

<a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"></a>

Si isAdminc'est le cas true, cela entraînera:

<a href="" class="baseclass adminclass"></a>

Oui, il est possible de changer dynamiquement une classe CSS en fonction de la situation, mais pas avec th:if. Ceci est fait avec l' opérateur elvis .

<a href="lorem-ipsum.html" th:class="${isAdmin}? adminclass : userclass">Lorem Ipsum</a> 

À cette fin et si je n'ai pas de variable booléenne, j'utilise ce qui suit:

<li th:class="${#strings.contains(content.language,'CZ')} ? active : ''">

Une autre réponse très similaire consiste à utiliser «égal» au lieu de «contient».

<li th:class="${#strings.equals(pageTitle,'How It Works')} ? active : ''">

Si vous voulez juste ajouter une classe en cas d'erreur, vous pouvez utiliser th:errorclass="my-error-class"mentionné dans la doc .

<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />

Appliqué à une balise de champ de formulaire (input, select, textarea…), il lira le nom du champ à examiner à partir de n'importe quel attribut name ou th: field dans la même balise, puis ajoutera la classe CSS spécifiée à la balise si ce champ a des erreurs associées

Juste pour ajouter ma propre opinion, au cas où cela pourrait être utile à quelqu'un. C'est ce que j'ai utilisé.

<div th:class="${request.read ? 'mdl-color-text--grey-800 w500' : ''}"> </div>

Encore une autre utilisation de th: class, identique à @NewbLeech et @Charles ont posté, mais simplifiée au maximum s'il n'y a pas de cas "else":

<input th:class="${#fields.hasErrors('password')} ? formFieldHasError" />

N'inclut pas l'attribut de classe si # fields.hasErrors ('password') est faux.

Ce que @Nilsi a mentionné est parfaitement correct. Cependant, adminclass et user class doivent être entourés de guillemets simples, car cela pourrait échouer en raison de la recherche de variables adminClass ou userclass qui devraient être des chaînes de Thymeleaf. Cela dit,

ça devrait être: -

 <a href="" class="baseclass" th:classappend="${isAdmin} ? 'adminclass' : 
 'userclass'"> 
 </a>

ou juste:

<a href="" th:class="${isAdmin} ? 'newclass' : 
  'baseclass'"> 
 </a>

Si vous cherchez à ajouter ou supprimer une classe en conséquence si l'URL contient certains paramètres ou non, c'est ce que vous pouvez faire

<a th:href="@{/admin/home}"  th:class="${#httpServletRequest.requestURI.contains('home')} ? 'nav-link active' : 'nav-link'"  >

Si l'url contient «home», la classe active sera ajoutée et vice versa.

Juste au cas où quelqu'un utiliserait Bootstrap, j'ai pu ajouter plus d'une classe:

<a href="" class="baseclass" th:classappend="${isAdmin} ?: 'text-danger font-italic' "></a>