web-dev-qa-db-fra.com

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

En utilisant Thymeleaf en tant que moteur de template, est-il possible d'ajouter/supprimer dynamiquement une classe CSS à/d'un simple div avec la clause th:if?

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 uniquement 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.

htmlcssthymeleaf
82
vdenotaris

Il y a aussi th:classappend.

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

Si isAdmin est true, il en résultera:

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

Oui, il est possible de changer une classe CSS de manière dynamique en fonction de la situation, mais pas avec th:if. Ceci est fait avec le opérateur elvis .

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

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

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

À 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 : ''">
5
Fleky

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 (entrée, sélection, zone de texte, etc.), il lit le nom du champ à examiner à partir de tout nom existant ou d'attributs th: field dans la même balise, puis ajoute la classe CSS spécifiée à la balise. si ce champ a des erreurs associées

3
Stephane L

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

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

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

2
Adrian Adamczyk

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>
1
Charles