Thymeleaf: как использовать условные выражения для динамического добавления / удаления класса CSS


99

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

Обычно я мог бы использовать условное предложение следующим образом:

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

Мы создадим ссылку на страницу lorem ipsum , но только если условие условия истинно.

Я ищу что-то другое: я бы хотел, чтобы блок всегда был виден, но с изменяемыми классами в зависимости от ситуации.


Ответы:


247

Также есть th:classappend.

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

Если isAdminесть true, то это приведет к:

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

3
Я думаю, это должен быть принятый ответ. th:classзаменяет / переписывает атрибут вашего класса. th:classappendэто то, что вы хотите.
Aboodz

В качестве альтернативы вы можете просто ввести желаемый класс в модель из контроллера, а затемth:classappend="${theRightClass}"
demaniak

1
Еще одна вещь, о которой следует помнить, - это то, что, к сожалению, у вас не может быть нескольких th:classappendатрибутов. Допускается максимум один. Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
user1053510

Разве нельзя th:classremoveудалить один класс, не затрагивая другие, или жестко кодировать весь список классов в вашем привязке xml? Или оставить какой-либо динамический класс и условно добавить его единственный способ?
Drazen Bjelovuk

Как это сделать, если нужно сменить более 2 классов
Синет Лакшита

34

Да, можно динамически изменять класс CSS в зависимости от ситуации, но не с помощью th:if. Это делается с помощью оператора elvis .

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

ссылка не работает. никогда раньше не слышал об Элвисе. ты помирился.
localhoost

@atilkan: Вы можете просто погуглить оператор Элвиса и увидеть, что это вариант тернарного оператора. Даже википедия объясняет это в первых нескольких строчках: en.wikipedia.org/wiki/Elvis_operator
Кенни

7

Для этой цели, и если у меня нет логической переменной, я использую следующее:

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

5

Другой очень похожий ответ - использовать «равно» вместо «содержит».

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

4

Если вы просто хотите добавить класс в случае ошибки вы можете использовать th:errorclass="my-error-class"упоминались в ДоПе .

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

Примененный к тегу поля формы (input, select, textarea…), он будет читать имя поля для проверки из любого существующего имени или атрибутов th: field в том же теге, а затем добавлять указанный класс CSS к тегу если с таким полем связаны ошибки


2

Просто чтобы добавить свое мнение, на случай, если оно кому-то будет полезно. Это то, что я использовал.

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

2

Еще одно использование th: class, такое же, как у @NewbLeech и @Charles, но упрощенное до максимума, если нет случая "else":

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

Не включает атрибут класса, если # fields.hasErrors ('password') ложно.


1

То, что упомянул @Nilsi, совершенно правильно. Однако adminclass и user class должны быть заключены в одинарные кавычки, так как это может не сработать из-за того, что Thymeleaf ищет переменные adminClass или userclass, которые должны быть строками. Тем не менее,

так должно быть: -

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

или просто:

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

0

Если вы хотите добавить или удалить класс соответственно, если URL-адрес содержит определенные параметры или нет. Это то, что вы можете сделать

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

Если URL-адрес содержит «дом», тогда будет добавлен активный класс, и наоборот.


0

На всякий случай, если кто-то использует Bootstrap, я смог добавить более одного класса:

<a href="" class="baseclass" th:classappend="${isAdmin} ?: 'text-danger font-italic' "></a>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.