Bedingte CSS-Klassen in Thymeleaf

1. Übersicht

In diesem kurzen Tutorial lernen wir einige verschiedene Möglichkeiten kennen, um CSS-Klassen in Thymeleaf bedingt hinzuzufügen.

Wenn Sie mit Thymeleaf nicht vertraut sind, empfehlen wir Ihnen, unsere Einführung zu lesen.

2. Verwenden von th: if

Nehmen wir an, unser Ziel ist es, a zu generieren deren Klassen vom Server bestimmt werden:

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

Bevor dieser HTML-Code bereitgestellt wird, muss der Server eine gute Möglichkeit haben, eine Bedingung auszuwerten und entweder die Klasse " Bedingung wahr" oder die Klasse " Bedingung falsch" sowie eine Basisklasse einzuschließen.

Wenn Sie HTML-Vorlagen erstellen, müssen Sie häufig eine bedingte Logik für dynamisches Verhalten hinzufügen.

Verwenden wir zunächst th: if , um die einfachste Form der bedingten Logik zu demonstrieren:

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

Wir können hier sehen, dass dies logischerweise dazu führt, dass die richtige CSS-Klasse an unser HTML-Element angehängt wird. Diese Lösung verstößt jedoch gegen das DRY-Prinzip, da der gesamte Codeblock dupliziert werden muss.

Die Verwendung von th: if kann in einigen Fällen sicherlich nützlich sein, aber wir sollten nach einer anderen Möglichkeit suchen, eine CSS-Klasse dynamisch anzuhängen.

3. Verwenden Sie th: attr

Thymeleaf bietet uns ein Attribut an, mit dem wir andere Attribute definieren können, th: attr .

Verwenden wir es, um unser Problem zu lösen:

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

Möglicherweise haben Sie bemerkt, dass die Basisklasse immer noch dupliziert ist. Außerdem gibt es ein spezifischeres Thymeleaf-Attribut, das wir beim Definieren von Klassen verwenden können.

4. Verwenden der Klasse th:

Das Attribut th: class ist eine Verknüpfung für th: attr = ”class =…”. Verwenden Sie es stattdessen und trennen Sie die Basisklasse vom Bedingungsergebnis:

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

Diese Lösung ist ziemlich gut, weil sie unseren Anforderungen entspricht und trocken ist. Es gibt jedoch noch ein weiteres Thymeleaf-Attribut, von dem wir profitieren können.

5. Verwenden von th: classappend

Wäre es nicht schön, unsere Basisklasse vollständig von der bedingten Logik zu entkoppeln? Wir können unsere Basisklasse statisch definieren und die bedingte Logik nur auf die relevanten Teile reduzieren:

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

6. Fazit

Bei jeder Iteration unseres Thymeleaf-Codes lernten wir eine nützliche bedingte Technik kennen, die später nützlich sein könnte. Letztendlich haben wir festgestellt, dass die Verwendung von th: classappend uns die beste Kombination aus DRY-Code und Trennung von Bedenken bietet und gleichzeitig unser Ziel erfüllt.

Alle diese Beispiele sind in einem funktionierenden Thymeleaf-Projekt zu sehen, das über GitHub verfügbar ist.