Thymeleaf: jak używać warunków warunkowych do dynamicznego dodawania / usuwania klas CSS

Używając Thymeleaf jako silnika szablonów, czy można dynamicznie dodawać / usuwać klasę CSS do / z prostego divz th:ifklauzulą?

Zwykle mógłbym użyć klauzuli warunkowej w następujący sposób:

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

Będziemy tworzyć łącze do strony lorem ipsum , ale tylko wtedy, gdy klauzula warunku jest prawdziwa.

Szukam czegoś innego: chciałbym, żeby klocek był zawsze widoczny, ale ze zmiennymi klasami w zależności od sytuacji.

Jest też th:classappend.

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

Jeśli isAdmintak true, to spowoduje:

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

Tak, można dynamicznie zmieniać klasę CSS w zależności od sytuacji, ale nie za pomocą th:if. Odbywa się to za pomocą operatora elvis .

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

W tym celu i jeśli nie mam zmiennej boolowskiej, używam:

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

Inną bardzo podobną odpowiedzią jest użycie „równa się” zamiast „zawiera”.

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

Jeśli chcesz tylko dołączyć klasę w przypadku błędu, możesz użyć th:errorclass="my-error-class"wspomnianego w dokumencie .

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

Zastosowany do tagu pola formularza (input, select, textarea…), odczyta nazwę pola do zbadania z dowolnej istniejącej nazwy lub atrybutu th: field w tym samym tagu, a następnie doda określoną klasę CSS do tagu jeśli z takim polem są powiązane błędy

Dodam tylko własną opinię, na wypadek gdyby komuś się przydała. To jest to, czego użyłem.

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

Jeszcze inne użycie th: class, tak samo jak @NewbLeech i @Charles, ale uproszczone do maksimum, jeśli nie ma przypadku „innego”:

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

Nie obejmuje atrybutu klasy, jeśli # fields.hasErrors ('password') ma wartość false.

To, o czym wspomniał @Nilsi, jest całkowicie poprawne. Jednak klasa adminclass i klasa użytkownika muszą być opakowane w pojedyncze cudzysłowy, ponieważ może to się nie powieść, ponieważ Thymeleaf szuka zmiennych adminClass lub userclass, które powinny być łańcuchami. To mówi,

powinno być: -

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

Lub tylko:

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

Jeśli chcesz odpowiednio dodać lub usunąć klasę, jeśli adres URL zawiera określone parametry lub nie. Oto, co możesz zrobić

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

Jeśli adres URL zawiera słowo „home”, zostanie dodana aktywna klasa i na odwrót.

Na wypadek, gdyby ktoś korzystał z Bootstrap, udało mi się dodać więcej niż jedną klasę:

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