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

99

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.

vdenotaris.dll
sumber
bagaimana dengan stackoverflow.com/questions/35530096/…
Manoj Ramanan

Jawaban:

243

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>
nilsi
sumber
3
Saya pikir ini harus menjadi jawaban yang diterima. th:classmengganti / menulis ulang atribut kelas Anda. th:classappendadalah apa yang kamu inginkan.
Aboodz
Atau Anda bisa saja menyuntikkan kelas yang diinginkan ke dalam model dari pengontrol, dan kemudian milikith:classappend="${theRightClass}"
demaniak
1
Satu hal lagi yang perlu diingat adalah sayangnya Anda tidak dapat memiliki banyak th:classappendatribut. Maksimal satu diperbolehkan. Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
pengguna1053510
Apakah tidak ada cara th:classremoveuntuk 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?
Drazen Bjelovuk
Bagaimana melakukannya, Jika perlu mengubah lebih dari 2 kelas
Sineth Lakshitha
34

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> 
Michiel Bijlsma
sumber
link rusak. belum pernah mendengar tentang elvis sebelumnya. apakah kamu membuat.
localhoost
@atilkan: Anda cukup google operator Elvis dan melihat varian dari operator Ternary. Bahkan wikipedia menjelaskannya dalam beberapa baris pertama: en.wikipedia.org/wiki/Elvis_operator
Kenny
7

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

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

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

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

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

Stephane L
sumber
2

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>
Charles
sumber
2

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.

Adrian Adamczyk
sumber
1

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>
N Djel Okoye
sumber
0

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.

Shubh
sumber
0

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

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