Умовні класи CSS в Thymeleaf

1. Огляд

У цьому короткому навчальному посібнику ми дізнаємося кілька різних способів умовного додавання класів CSS в Thymeleaf.

Якщо ви не знайомі з Thymeleaf, рекомендуємо переглянути наш вступ до нього.

2. Використання й: якщо

Припустимо, що наша мета - створити файл класи яких визначаються сервером:

 I have two classes: "base" and either "condition-true" or "condition-false" depending on a server-side condition. 

Перш ніж цей HTML-сервіс буде представлений, нам потрібен хороший спосіб для сервера оцінити умову і включити або клас -true, або умовно-помилковий клас, а також базовий клас.

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

Спочатку скористаємось th: якщо продемонструвати найпростішу форму умовної логіки:

 This HTML is duplicated. We probably want a better solution.   This HTML is duplicated. We probably want a better solution. 

Тут ми бачимо, що це логічно призведе до того, що правильний клас CSS буде приєднаний до нашого елемента HTML, але це рішення порушує принцип DRY, оскільки вимагає дублювання цілого блоку коду.

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

3. Використання th: attr

Thymeleaf пропонує нам атрибут, який дозволить нам визначити інші атрибути, званий th: attr .

Давайте використаємо його для вирішення нашої проблеми:

 This HTML is consolidated, which is good, but the Thymeleaf attribute still has some redundancy in it. 

Можливо, ви помітили, що базовий клас все ще дублюється. Крім того, існує більш конкретний атрибут Thymeleaf, який ми можемо використовувати при визначенні класів.

4. Використання й: класу

Атрибут th: class - це ярлик для th: attr = ”class = ...”, тож давайте використовуватимемо його, разом із відокремленням базового класу від результату умови:

 The base CSS class still has to be appended with String concatenation. We can do a little bit better. 

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

5. Використання th: classappend

Чи не було б непогано повністю відокремити наш базовий клас від умовної логіки? Ми можемо статично визначити наш базовий клас і звести умовну логіку лише до відповідних фрагментів:

 This HTML is consolidated, and the conditional class is appended separately from the static base class. 

6. Висновок

З кожною ітерацією нашого коду Thymeleaf ми дізналися про корисну умовну техніку, яка може стати в нагоді пізніше. Зрештою, ми виявили, що використання th: classappend забезпечує найкраще поєднання коду СУХОГО та відокремлення проблем, одночасно задовольняючи нашу мету.

Усі ці приклади можна побачити в робочому проекті Thymeleaf, доступному на GitHub.