Thymeleaf: come utilizzare i condizionali per aggiungere / rimuovere dinamicamente una classe CSS


99

Utilizzando Thymeleaf come motore di modelli, è possibile aggiungere / rimuovere dinamicamente una classe CSS a / da un semplice divcon la th:ifclausola?

Normalmente, potrei usare la clausola condizionale come segue:

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

Creeremo un collegamento alla pagina di lorem ipsum , ma solo se la clausola di condizione è vera.

Cerco qualcosa di diverso: vorrei che il blocco fosse sempre visibile, ma con classi modificabili a seconda della situazione.


Risposte:


243

C'è anche th:classappend.

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

Se isAdminè true, allora questo si tradurrà in:

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

3
Penso che questa dovrebbe essere la risposta accettata. th:classsostituisce / riscrive l'attributo di classe. th:classappendè quello che vuoi.
Aboodz

In alternativa potresti semplicemente iniettare la classe desiderata nel modello dal controller, quindi avereth:classappend="${theRightClass}"
demaniak

1
Un'altra cosa da ricordare è che sfortunatamente non puoi avere più th:classappendattributi. È consentito al massimo uno. Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
user1053510

Non è possibile th:classremoverimuovere una singola classe senza influire sugli altri o codificare a livello di codice un intero elenco di classi nel tuo xml vincolante? O è lasciare fuori qualsiasi classe dinamica e aggiungere in modo condizionale l'unica strada da percorrere?
Drazen Bjelovuk

Come fare, se è necessario cambiare più di 2 classi
Sineth Lakshitha il

34

Sì, è possibile modificare dinamicamente una classe CSS in base alla situazione, ma non con th:if. Questo viene fatto con l' operatore elvis .

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

collegamento interrotto. mai sentito parlare di elvis prima. hai fatto pace.
localhoost

@atilkan: potresti semplicemente google operatore Elvis e vedere che è una variante dell'operatore ternario. Anche wikipedia lo spiega nelle prime righe: en.wikipedia.org/wiki/Elvis_operator
Kenny

7

A questo scopo e se non ho una variabile booleana, utilizzo quanto segue:

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

5

Un'altra risposta molto simile è usare "uguale" invece di "contiene".

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

4

Se vuoi semplicemente aggiungere una classe in caso di errore puoi usare th:errorclass="my-error-class"menzionato nel documento .

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

Applicato a un tag del campo modulo (input, select, textarea ...), leggerà il nome del campo da esaminare da qualsiasi nome esistente o attributi th: field nello stesso tag, quindi aggiungerà la classe CSS specificata al tag se tale campo ha errori associati


2

Tanto per aggiungere la mia opinione, nel caso potesse essere utile a qualcuno. Questo è quello che ho usato.

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

2

Ancora un altro utilizzo di th: class, lo stesso di @NewbLeech e @Charles hanno pubblicato, ma semplificato al massimo se non ci sono casi "else":

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

Non include l'attributo di classe se # fields.hasErrors ('password') è falso.


1

Ciò che ha menzionato @Nilsi è perfettamente corretto. Tuttavia, adminclass e user class devono essere racchiusi tra virgolette singole poiché ciò potrebbe non riuscire a causa di Thymeleaf alla ricerca di variabili adminClass o userclass che dovrebbero essere stringhe. Detto ciò,

dovrebbe essere: -

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

o semplicemente:

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

0

Se stai cercando di aggiungere o rimuovere una classe di conseguenza se l'URL contiene determinati parametri o meno, questo è quello che puoi fare

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

Se l'URL contiene "home", verrà aggiunta la classe attiva e viceversa.


0

Nel caso in cui qualcuno stia usando Bootstrap, sono stato in grado di aggiungere più di una classe:

<a href="" class="baseclass" th:classappend="${isAdmin} ?: 'text-danger font-italic' "></a>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.