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


99

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.


Réponses:


247

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>

3
Je pense que cela devrait être la réponse acceptée. th:classremplace / réécrit votre attribut de classe. th:classappendest ce que vous voulez.
Aboodz

Alternativement, vous pouvez simplement injecter la classe souhaitée dans le modèle à partir du contrôleur, puis avoirth:classappend="${theRightClass}"
demaniak

1
Une autre chose à retenir est que vous ne pouvez malheureusement pas avoir plusieurs th:classappendattributs. Un maximum est autorisé. Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
user1053510

N'y a-t-il pas th:classremovede supprimer une seule classe sans affecter les autres ou de coder en dur une liste de classes entière dans votre xml de liaison? Ou est-ce que laisser une classe dynamique désactivée et ajouter conditionnellement est la seule façon de procéder?
Drazen Bjelovuk

Comment faire, si besoin de changer plus de 2 classes
Sineth Lakshitha

34

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> 

lien cassé. Je n'ai jamais entendu parler d'elvis auparavant. avez-vous inventé.
localhoost

@atilkan: Vous pouvez simplement rechercher l'opérateur Elvis sur Google et voir que c'est une variante de l'opérateur ternaire. Même wikipedia l'explique dans les premières lignes: en.wikipedia.org/wiki/Elvis_operator
Kenny

7

À 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

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

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

4

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


2

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>

2

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.


1

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>

0

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.


0

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.