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.

— vdenotaris
fonte

che dire di questo stackoverflow.com/questions/35530096/...

— Manoj Ramanan

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>

— nilsi
fonte

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>

— Michiel Bijlsma
fonte

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 : ''">

— Fleky
fonte

5

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

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

— illuminato
fonte

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

— Stephane L
fonte

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>

— Charles
fonte

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.

— Adrian Adamczyk
fonte

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>

— N Djel Okoye
fonte

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.

— Shubh
fonte

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>

— Charlie
fonte