«1. Обзор

В этом кратком руководстве мы изучим несколько различных способов условного добавления классов CSS в Thymeleaf.

Если вы не знакомы с Thymeleaf, мы рекомендуем ознакомиться с нашим введением в него.

2. Использование th:if

Предположим, что наша цель — сгенерировать \u003cspan\u003e, классы которого определяются сервером: сервер для оценки условия и включения либо класса условия-истина, либо класса условия-ложь, а также базового класса. 

<span class="base condition-true">
   I have two classes: "base" and either "condition-true" or "condition-false" depending on a server-side condition.
</span>

При создании шаблонов HTML довольно часто требуется добавить некоторую условную логику для динамического поведения.

Во-первых, давайте воспользуемся th:if для демонстрации простейшей формы условной логики:

Здесь мы видим, что это логически приведет к тому, что правильный класс CSS будет присоединен к нашему элементу HTML, но это решение нарушает принцип DRY, потому что он требует дублирования всего блока кода. 

<span th:if="${condition}" class="base condition-true">
   This HTML is duplicated. We probably want a better solution.
</span>
<span th:if="${!condition}" class="base condition-false">
   This HTML is duplicated. We probably want a better solution.
</span>

Использование th:if, безусловно, может быть полезным в некоторых случаях, но мы должны искать другой способ динамического добавления класса CSS.

3. Использование th:attr

Thymeleaf предлагает нам атрибут, который позволит нам определить другие атрибуты, называемые th:attr.

Давайте используем его для решения нашей проблемы:

Вы могли заметить, что базовый класс все еще дублируется. Кроме того, есть более специфический атрибут Thymeleaf, который мы можем использовать при определении классов. 

<span th:attr="class=${condition ? 'base condition-true' : 'base condition-false'}">
   This HTML is consolidated, which is good, but the Thymeleaf attribute still has some redundancy in it.
</span>

4. Использование th:class

Атрибут th:class является сокращением для th:attr=†class=…â€, так что давайте использовать его вместо этого, наряду с отделением базового класса от условия результат:

Это решение довольно хорошее, потому что оно соответствует нашим потребностям и является СУХИМ. Однако есть еще один атрибут Thymeleaf, который нам может пригодиться. 

<span th:class="'base '+${condition ? 'condition-true' : 'condition-false'}">
   The base CSS class still has to be appended with String concatenation. We can do a little bit better.
</span>

5. Использование th:classappend

Было бы неплохо полностью отделить наш базовый класс от условной логики? Мы можем статически определить наш базовый класс и сократить условную логику только до соответствующих частей:

6. Заключение 

<span class="base" th:classappend="${condition ? 'condition-true' : 'condition-false'}">
   This HTML is consolidated, and the conditional class is appended separately from the static base class.
</span>

С каждой итерацией нашего кода Thymeleaf мы узнавали о полезной условной технике, которая может пригодиться. позже. В конечном итоге мы обнаружили, что использование th:classappend обеспечивает наилучшее сочетание DRY-кода и разделения ответственности, а также удовлетворяет нашей цели.

Все эти примеры можно увидеть в рабочем проекте Thymeleaf, доступном на GitHub.

«