Agregar clase a elemento HTML con Thymeleaf

En este post te mostraré cómo agregar una clase HTML a un elemento (como un div, un párrafo, etcétera) de manera dinámica usando Thymeleaf, un motor de plantillas usado mayormente en Spring Boot.

Para agregar una clase a la lista de clases existentes, se usa:

th:classapend="expresión"

Esta declaración permite agregar una clase además de las que el elemento ya tiene declaradas con el atributo class.

Por ejemplo, si se quiere agregar una clase dependiendo de una variable:

<div th:classappend="${clase}" class="alert">
Contenido del div
</div>

En este caso la clase del elemento HTML es alert, pero con Thymeleaf y classappend se agrega otra clase de manera dinámica.

Suponiendo que la variable clase es alert-success las clases del div quedarían así al final:

<div class="alert alert-success">

Ya que classappend permite agregar una clase a un elemento HTML con Thymeleaf.

Esto funciona igualmente con ifs y operadores ternarios:

<div th:classappend="'alert-' + (${clase != null} ? ${clase} : info)" class="alert">
Contenido del div
</div>

Así de fácil se puede agregar una clase dinámica usando Thymeleaf.