Dengan menggunakan Thymeleaf sebagai mesin template, apakah mungkin untuk menambahkan / menghapus secara dinamis kelas CSS ke / dari yang sederhana div
dengan th:if
klausa?
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.
Jawaban:
Ada juga
th:classappend
.Jika
isAdmin
initrue
, maka ini akan menghasilkan:sumber
th:class
mengganti / menulis ulang atribut kelas Anda.th:classappend
adalah apa yang kamu inginkan.th:classappend="${theRightClass}"
th:classappend
atribut. Maksimal satu diperbolehkan.Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
th:classremove
untuk menghapus satu kelas tanpa memengaruhi yang lain atau membuat kode keras seluruh daftar kelas di xml binding Anda? Atau apakah membiarkan kelas dinamis tidak aktif dan secara kondisional menambahkan satu-satunya cara untuk pergi?Ya, dimungkinkan untuk mengubah kelas CSS secara dinamis sesuai dengan situasinya, tetapi tidak dengan
th:if
. Ini dilakukan dengan operator elvis .sumber
Untuk tujuan ini dan jika saya tidak memiliki variabel boolean, saya menggunakan yang berikut ini:
sumber
Jawaban lain yang sangat mirip adalah menggunakan "sama dengan" daripada "berisi".
sumber
Jika Anda hanya ingin menambahkan kelas jika terjadi kesalahan, Anda dapat menggunakan yang
th:errorclass="my-error-class"
disebutkan di dokumen .sumber
Sekadar menambahkan pendapat saya sendiri, kalau-kalau itu mungkin berguna bagi seseorang. Ini yang saya gunakan.
sumber
Namun penggunaan lain dari th: class, sama seperti @NewbLeech dan @Charles telah diposting, tetapi disederhanakan secara maksimal jika tidak ada kasus "lain":
Tidak menyertakan atribut kelas jika # fields.hasErrors ('password') salah.
sumber
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: -
atau hanya:
sumber
Jika Anda ingin menambah atau menghapus kelas sesuai jika url berisi params tertentu atau tidak. Inilah yang dapat Anda lakukan
Jika url berisi 'home' maka kelas yang aktif akan ditambahkan dan sebaliknya.
sumber
Seandainya seseorang menggunakan Bootstrap, saya dapat menambahkan lebih dari satu kelas:
sumber