Classi CSS condizionali in Thymeleaf

1. Panoramica

In questo rapido tutorial, impareremo alcuni modi diversi per aggiungere in modo condizionale classi CSS in Thymeleaf.

Se non hai familiarità con Thymeleaf, ti consigliamo di controllare la nostra introduzione.

2. Utilizzando th: if

Supponiamo che il nostro obiettivo sia generare un file le cui classi sono determinate dal server:

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

Prima che questo HTML venga servito, abbiamo bisogno di un buon modo per il server di valutare una condizione e includere la classe condition-true o la classe condition-false , così come una classe base .

Quando si crea un modello HTML, è abbastanza comune dover aggiungere una logica condizionale per il comportamento dinamico.

Per prima cosa, usiamo th: if per dimostrare la forma più semplice di logica condizionale:

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

Possiamo vedere qui che questo porterà logicamente a allegare la classe CSS corretta al nostro elemento HTML, ma questa soluzione viola il principio DRY perché richiede la duplicazione dell'intero blocco di codice.

L'uso di th: if può certamente essere utile in alcuni casi, ma dovremmo cercare un altro modo per aggiungere dinamicamente una classe CSS.

3. Utilizzando th: attr

Thymeleaf ci offre un attributo che ci permetterà di definire altri attributi, chiamato th: attr .

Usiamolo per risolvere il nostro problema:

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

Avrai notato che la classe di base è ancora duplicata. Inoltre, c'è un attributo Thymeleaf più specifico che possiamo usare quando definiamo le classi.

4. Utilizzando th: class

L' attributo th: class è una scorciatoia per th: attr = "class = ..." quindi usiamolo invece, oltre a separare la classe base dal risultato della condizione:

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

Questa soluzione è abbastanza buona perché soddisfa le nostre esigenze ed è ASCIUTTA. Tuttavia, c'è ancora un altro attributo Thymeleaf di cui possiamo beneficiare.

5. Utilizzando th: classappend

Non sarebbe bello separare completamente la nostra classe base dalla logica condizionale? Possiamo definire staticamente la nostra classe base e ridurre la logica condizionale solo ai pezzi rilevanti:

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

6. Conclusione

Con ogni iterazione del nostro codice Thymeleaf, abbiamo imparato a conoscere un'utile tecnica condizionale che potrebbe tornare utile in seguito. Alla fine, abbiamo scoperto che l'uso di th: classappend ci fornisce la migliore combinazione di codice DRY e separazione delle preoccupazioni, soddisfacendo anche il nostro obiettivo.

Tutti questi esempi possono essere visti in un progetto Thymeleaf funzionante disponibile su GitHub.