Чебрець: як використовувати умовні умови для динамічного додавання / видалення класу CSS

Використовуючи Thymeleaf в якості двигуна шаблонів, чи можна динамічно додавати / видаляти клас CSS до / з простого за divдопомогою цього th:ifпункту?

Як правило, я міг би використовувати умовний пункт так:

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

Ми будемо створювати посилання на сторінку lorem ipsum , але лише в тому випадку, якщо застереження умови є істинним.

Я шукаю щось інше: я б хотів, щоб блок завжди був видно, але зі змінними класами відповідно до ситуації.

Є також th:classappend.

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

Якщо isAdminє true, то це призведе до:

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

Так, можна змінити клас CSS динамічно відповідно до ситуації, але не з th:if. Це робиться за допомогою оператора elvis .

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

З цією метою, і якщо у мене немає булевої змінної, я використовую наступне:

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

Ще одна дуже схожа відповідь - використовувати "рівний" замість "містить".

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

Якщо ви просто хочете додати клас у разі помилки, ви можете використовувати th:errorclass="my-error-class"згадування в документі .

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

Застосовано до тегу поля форми (input, select, textarea ...), воно зчитує ім'я поля, що перевіряється, із будь-якого існуючого атрибута name або th: field у тому самому тегу, а потім додає вказаний клас CSS до тегу якщо таке поле має будь-які пов'язані помилки

Просто додати власну думку, на випадок, якщо вона може комусь стати в нагоді. Це те, чим я користувався.

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

Ще одне використання th: класу, таке саме, як @NewbLeech та @Charles опублікували, але спрощено до максимуму, якщо відсутній регістр "else":

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

Не включає атрибут класу, якщо # fields.hasErrors ('пароль') хибне.

Те, що згадала @Nilsi, є цілком правильним. Однак адмінклас та клас користувача повинні бути загорнуті в єдині лапки, оскільки це може бути невдалим, оскільки Thymeleaf шукає змінні adminClass або userclass, які повинні бути рядками. Це сказав:

вона повинна бути: -

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

або просто:

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

Якщо ви хочете відповідно додати або видалити клас, якщо URL містить певні параметри чи ні. Це те, що ви можете зробити

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

Якщо url містить "home", тоді буде додано активний клас і навпаки.

На той випадок, якщо хтось використовує Bootstrap, я зміг додати більше одного класу:

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