Thymeleaf: cómo usar condicionales para agregar / eliminar dinámicamente una clase CSS

99

Al usar Thymeleaf como motor de plantilla, ¿es posible agregar / eliminar dinámicamente una clase CSS a / desde un simple divcon la th:ifcláusula?

Normalmente, podría usar la cláusula condicional de la siguiente manera:

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

Crearemos un enlace a la página de lorem ipsum , pero solo si la cláusula de condición es verdadera.

Busco algo diferente: me gustaría que el bloque esté siempre visible, pero con clases cambiables según la situación.

vdenotaris
fuente
¿qué pasa con este? stackoverflow.com/questions/35530096/…
Manoj Ramanan

Respuestas:

243

También hay th:classappend.

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

Si isAdmines así true, esto resultará en:

<a href="" class="baseclass adminclass"></a>
nilsi
fuente
3
Creo que esta debería ser la respuesta aceptada. th:classreemplaza / reescribe tu atributo de clase. th:classappendes lo que quieres.
Aboodz
Alternativamente, puede inyectar la clase deseada en el modelo desde el controlador y luego tenerth:classappend="${theRightClass}"
demaniak
1
Una cosa más para recordar es que desafortunadamente no puede tener múltiples th:classappendatributos. Se permite un máximo de uno. Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
user1053510
¿No se th:classremovepuede eliminar una sola clase sin afectar a las demás o sin codificar una lista de clases completa en su xml vinculante? ¿O es dejar de lado cualquier clase dinámica y agregar condicionalmente el único camino a seguir?
Drazen Bjelovuk
Cómo hacerlo, si necesita cambiar más de 2 clases
Sineth Lakshitha
34

Sí, es posible cambiar una clase CSS dinámicamente según la situación, pero no con th:if. Esto se hace con el operador elvis .

<a href="lorem-ipsum.html" th:class="${isAdmin}? adminclass : userclass">Lorem Ipsum</a> 
Michiel Bijlsma
fuente
enlace roto Nunca había oído hablar de Elvis antes. te inventaste
localhoost
@atilkan: simplemente puede buscar en Google el operador Elvis y ver que es una variante del operador Ternario. Incluso wikipedia lo explica en las primeras líneas: en.wikipedia.org/wiki/Elvis_operator
Kenny
7

Para este propósito y si no tengo una variable booleana, uso lo siguiente:

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

Otra respuesta muy similar es usar "es igual a" en lugar de "contiene".

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

Si solo desea agregar una clase en caso de error, puede usar th:errorclass="my-error-class"mencionado en el documento .

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

Aplicado a una etiqueta de campo de formulario (entrada, selección, área de texto ...), leerá el nombre del campo que se examinará a partir de cualquier nombre existente o atributos th: field en la misma etiqueta, y luego agregará la clase CSS especificada a la etiqueta. si dicho campo tiene errores asociados

Stephane L
fuente
2

Solo para agregar mi propia opinión, en caso de que pueda ser útil para alguien. Esto es lo que usé.

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

Otro uso más de th: class, igual que @NewbLeech y @Charles han publicado, pero simplificado al máximo si no hay un caso "else":

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

No incluye el atributo de clase si # fields.hasErrors ('contraseña') es falso.

Adrian Adamczyk
fuente
1

Lo que mencionó @Nilsi es perfectamente correcto. Sin embargo, adminclass y user class deben estar entre comillas simples, ya que esto podría fallar debido a que Thymeleaf busca las variables adminClass o userclass que deberían ser cadenas. Dicho eso

debería ser: -

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

o solo:

<a href="" th:class="${isAdmin} ? 'newclass' : 
  'baseclass'"> 
 </a>
N Djel Okoye
fuente
0

Si está buscando agregar o eliminar una clase en consecuencia, si la URL contiene ciertos parámetros o no, esto es lo que puede hacer

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

Si la URL contiene 'casa', se agregará la clase activa y viceversa.

Shubh
fuente
0

En caso de que alguien esté usando Bootstrap, pude agregar más de una clase:

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