Thymeleaf: como usar condicionais para adicionar / remover dinamicamente uma classe CSS


99

Usando o Thymeleaf como mecanismo de modelo, é possível adicionar / remover dinamicamente uma classe CSS de / para um simples divcom a th:ifcláusula?

Normalmente, eu poderia usar a cláusula condicional da seguinte maneira:

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

Estaremos criando um link para a página lorem ipsum , mas apenas se a cláusula de condição for verdadeira.

Procuro algo diferente: gostaria que o bloco estivesse sempre visível, mas com classes mutáveis ​​de acordo com a situação.


Respostas:


243

Existe também th:classappend.

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

Se isAdminfor true, isso resultará em:

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

3
Acho que essa deve ser a resposta aceita. th:classsubstitui / reescreve seu atributo de classe. th:classappendé o que você quer.
Aboodz

Alternativamente, você pode simplesmente injetar a classe desejada no modelo do controlador e, em seguida, terth:classappend="${theRightClass}"
demaniak

1
Mais uma coisa a lembrar é que infelizmente você não pode ter vários th:classappendatributos. Máximo de um é permitido. Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
user1053510

Não há th:classremovecomo remover uma única classe sem afetar as outras ou codificar uma lista de classes inteira em seu xml de ligação? Ou deixar qualquer classe dinâmica desativada e anexar condicionalmente é o único caminho a percorrer?
Drazen Bjelovuk de

Como fazer, se precisar mudar mais de 2 classes
Sineth Lakshitha

34

Sim, é possível alterar uma classe CSS dinamicamente de acordo com a situação, mas não com th:if. Isso é feito com o operador elvis .

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

link quebrado.nunca ouvi falar de Elvis antes. você inventou.
localhoost de

@atilkan: Você poderia simplesmente pesquisar no google operador Elvis e ver que é uma variante do operador Ternary. Até a wikipedia explica isso nas primeiras linhas: en.wikipedia.org/wiki/Elvis_operator
Kenny

7

Para este propósito e se eu não tiver uma variável booleana, eu uso o seguinte:

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

5

Outra resposta muito semelhante é usar "igual a" em vez de "contém".

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

4

Se você deseja apenas acrescentar uma aula em caso de erro, pode usar o th:errorclass="my-error-class"mencionado no documento .

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

Aplicado a uma tag de campo de formulário (input, select, textarea ...), ele lerá o nome do campo a ser examinado a partir de qualquer nome existente ou atributos th: field na mesma tag e, em seguida, anexará a classe CSS especificada à tag se tal campo tiver algum erro associado


2

Só para acrescentar a minha opinião, caso possa ser útil para alguém. Isso é o que eu usei.

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

2

Ainda outro uso de th: class, o mesmo que @NewbLeech e @Charles postaram, mas simplificado ao máximo se não houver nenhum caso "else":

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

Não inclui o atributo de classe se # fields.hasErrors ('password') for false.


1

O que @Nilsi mencionou está perfeitamente correto. No entanto, adminclass e user class precisam ser colocados entre aspas simples, pois isso pode falhar devido ao Thymeleaf procurar por variáveis ​​adminClass ou userclass que devem ser strings. Dito isto,

deveria ser: -

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

ou apenas:

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

0

Se você deseja adicionar ou remover uma classe de acordo, se o url contém determinados parâmetros ou não. Isso é o que você pode fazer

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

Se o url contiver 'casa', a classe ativa será adicionada e vice-versa.


0

Caso alguém esteja usando Bootstrap, consegui adicionar mais de uma classe:

<a href="" class="baseclass" th:classappend="${isAdmin} ?: 'text-danger font-italic' "></a>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.