Agregar clases css con Thymeleaf usando un condicional

Publicado el 28 junio 2016 por Elvenbyte @elvenbyte

Hay dos formas de hacerlo, th:class y th:classappend, y con las dos se utiliza el operador elvis o ternario.

Usaremos th:class cuando no tengamos definida la clase css, y queramos agregar una clase en función de una condición. Es importante que no exista un atributo class ya definido, si no Thymeleaf nos levantará una excepción. Un ejemplo a continuación:

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

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

Si ya tenemos un atributo class definido debemos usar classappend, de la siguiente manera:

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

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

Obsérvese que en este caso el atributo class ya contiene una clase “baseclass”.

Para el artículo me he nutrido de la info que aparece aquí.