Kelas CSS Bersyarat di Timeleaf

1. Ikhtisar

Dalam tutorial singkat ini, kita akan mempelajari beberapa cara berbeda untuk menambahkan kelas CSS secara kondisional di Thymeleaf.

Jika Anda tidak terbiasa dengan Thymeleaf, kami sarankan untuk memeriksa pengantar kami.

2. Menggunakan th: if

Mari asumsikan bahwa tujuan kita adalah menghasilkan file yang kelasnya ditentukan oleh server:

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

Sebelum HTML ini disajikan, kita memerlukan cara yang baik bagi server untuk mengevaluasi kondisi dan menyertakan kelas condition-true atau kelas condition-false , serta kelas dasar .

Saat membuat template HTML, sangat umum untuk perlu menambahkan beberapa logika kondisional untuk perilaku dinamis.

Pertama, mari gunakan th: if untuk mendemonstrasikan bentuk paling sederhana dari logika kondisional:

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

Kita dapat melihat di sini bahwa ini secara logis akan menghasilkan kelas CSS yang benar yang dilampirkan ke elemen HTML kita, tetapi solusi ini melanggar prinsip KERING karena memerlukan duplikasi seluruh blok kode.

Menggunakan th: if tentu bisa berguna dalam beberapa kasus, tetapi kita harus mencari cara lain untuk menambahkan kelas CSS secara dinamis.

3. Menggunakan th: attr

Thymeleaf memberi kita atribut yang memungkinkan kita mendefinisikan atribut lain, yang disebut th: attr .

Mari kita gunakan untuk menyelesaikan masalah kita:

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

Anda mungkin telah memperhatikan bahwa kelas dasar masih diduplikasi. Juga, ada atribut Thymeleaf yang lebih spesifik yang dapat kita gunakan saat mendefinisikan kelas.

4. Menggunakan th: class

The th: class atribut adalah cara pintas untuk th: attr =”class = ...” jadi mari kita menggunakannya sebagai gantinya, bersama dengan memisahkan dasar kelas dari hasil kondisi:

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

Solusi ini cukup bagus karena memenuhi kebutuhan kita dan KERING. Namun, masih ada atribut Timeleaf lain yang dapat kita manfaatkan.

5. Menggunakan th: classappend

Bukankah menyenangkan untuk benar-benar memisahkan kelas dasar kita dari logika bersyarat? Kita bisa secara statis mendefinisikan kelas dasar kita dan mengurangi logika kondisional hanya ke bagian yang relevan:

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

6. Kesimpulan

Dengan setiap iterasi kode Timeleaf kami, kami belajar tentang teknik bersyarat yang berguna yang mungkin berguna nanti. Akhirnya, kami menemukan bahwa menggunakan th: classappend memberi kami kombinasi terbaik dari kode KERING dan pemisahan perhatian sekaligus memenuhi tujuan kami.

Semua contoh ini dapat dilihat dalam proyek Thymeleaf yang berfungsi yang tersedia di GitHub.