Thymeleaf: cara menggunakan kondisional untuk menambahkan / menghapus kelas CSS secara dinamis

Dengan menggunakan Thymeleaf sebagai mesin template, apakah mungkin untuk menambahkan / menghapus secara dinamis kelas CSS ke / dari yang sederhana divdengan th:ifklausa?

Biasanya, saya dapat menggunakan klausa bersyarat sebagai berikut:

<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a> 

Kami akan membuat link ke halaman lorem ipsum , tetapi hanya jika klausa kondisi benar.

Saya mencari sesuatu yang berbeda: Saya ingin blok tersebut selalu terlihat, tetapi dengan kelas yang dapat diubah sesuai dengan situasi.

Ada juga th:classappend.

<a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"></a>

Jika isAdminini true, maka ini akan menghasilkan:

<a href="" class="baseclass adminclass"></a>

Ya, dimungkinkan untuk mengubah kelas CSS secara dinamis sesuai dengan situasinya, tetapi tidak dengan th:if. Ini dilakukan dengan operator elvis .

<a href="lorem-ipsum.html" th:class="${isAdmin}? adminclass : userclass">Lorem Ipsum</a> 

Untuk tujuan ini dan jika saya tidak memiliki variabel boolean, saya menggunakan yang berikut ini:

<li th:class="${#strings.contains(content.language,'CZ')} ? active : ''">

Jawaban lain yang sangat mirip adalah menggunakan "sama dengan" daripada "berisi".

<li th:class="${#strings.equals(pageTitle,'How It Works')} ? active : ''">

Jika Anda hanya ingin menambahkan kelas jika terjadi kesalahan, Anda dapat menggunakan yang th:errorclass="my-error-class"disebutkan di dokumen .

<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />

Diterapkan ke tag bidang formulir (masukan, pilih, area teks ...), itu akan membaca nama bidang yang akan diperiksa dari nama yang ada atau atribut th: bidang di tag yang sama, dan kemudian menambahkan kelas CSS yang ditentukan ke tag jika bidang tersebut memiliki kesalahan terkait

Sekadar menambahkan pendapat saya sendiri, kalau-kalau itu mungkin berguna bagi seseorang. Ini yang saya gunakan.

<div th:class="${request.read ? 'mdl-color-text--grey-800 w500' : ''}"> </div>

Namun penggunaan lain dari th: class, sama seperti @NewbLeech dan @Charles telah diposting, tetapi disederhanakan secara maksimal jika tidak ada kasus "lain":

<input th:class="${#fields.hasErrors('password')} ? formFieldHasError" />

Tidak menyertakan atribut kelas jika # fields.hasErrors ('password') salah.

Apa yang @Nilsi sebutkan benar sekali. Namun, adminclass dan user class perlu dibungkus dalam tanda kutip tunggal karena ini mungkin gagal karena Thymeleaf mencari variabel adminClass atau userclass yang seharusnya berupa string. Yang mengatakan,

harus: -

 <a href="" class="baseclass" th:classappend="${isAdmin} ? 'adminclass' : 
 'userclass'"> 
 </a>

atau hanya:

<a href="" th:class="${isAdmin} ? 'newclass' : 
  'baseclass'"> 
 </a>

Jika Anda ingin menambah atau menghapus kelas sesuai jika url berisi params tertentu atau tidak. Inilah yang dapat Anda lakukan

<a th:href="@{/admin/home}"  th:class="${#httpServletRequest.requestURI.contains('home')} ? 'nav-link active' : 'nav-link'"  >

Jika url berisi 'home' maka kelas yang aktif akan ditambahkan dan sebaliknya.

Seandainya seseorang menggunakan Bootstrap, saya dapat menambahkan lebih dari satu kelas:

<a href="" class="baseclass" th:classappend="${isAdmin} ?: 'text-danger font-italic' "></a>