Thymeleaf: Bir CSS sınıfını dinamik olarak eklemek / kaldırmak için koşul ifadeleri nasıl kullanılır

99

Thymeleaf'i şablon motoru olarak kullanarak , basit bir cümle divile bir CSS sınıfını dinamik olarak eklemek / kaldırmak mümkün müdür th:if?

Normalde koşullu cümleyi aşağıdaki gibi kullanabilirim:

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

Lorem ipsum sayfasına bir bağlantı oluşturacağız , ancak yalnızca koşul cümlesi doğruysa.

Farklı bir şey arıyorum: Bloğun her zaman görünür olmasını istiyorum, ancak duruma göre değişken sınıflarla.

— Vdenotaris
kaynak

peki ya bu stackoverflow.com/questions/35530096/…

— Manoj Ramanan

250

Ayrıca var th:classappend.

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

Eğer isAdminbir true, sonra bu neden olur:

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

— Nilsi
kaynak

3

Bence bu kabul edilen cevap olmalı. th:classsınıf özelliğinizi değiştirir / yeniden yazar. th:classappendistediğin şey.

— Aboodz

Alternatif olarak, istediğiniz sınıfı kontrolörden modele enjekte edebilir ve ardındanth:classappend="${theRightClass}"

— demaniak

1

Hatırlanması gereken bir şey daha, maalesef birden fazla th:classappendözelliğe sahip olamayacağınızdır . En fazla birine izin verilir.

Fatal error during parsing    org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".

— user1053510

th:classremoveTek bir sınıfı diğerlerini etkilemeden veya bağlama xml'nizdeki tüm bir sınıf listesini sabit kodlamadan kaldırmak yok mu? Yoksa herhangi bir dinamik sınıfı devre dışı bırakmak ve koşullu olarak gitmek için tek yolu eklemek mi?

— Drazen Bjelovuk

Nasıl yapılacağı, varsa fazla 2 sınıfları değiştirmeye gerek

— Sineth Lakshitha

34

Evet, duruma göre bir CSS sınıfını dinamik olarak değiştirmek mümkündür, ancak ile değil th:if. Bu, elvis operatörü ile yapılır .

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

— Michiel Bijlsma
kaynak

@atilkan: Google Elvis operatörünü basitçe kullanabilir ve bunun Ternary operatörünün bir çeşidi olduğunu görebilirsiniz. Wikipedia bile ilk birkaç satırda bunu açıklıyor: en.wikipedia.org/wiki/Elvis_operator

— Kenny

7

Bu amaçla ve eğer boole değişkenim yoksa aşağıdakileri kullanıyorum:

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

— Fleky
kaynak

5

Çok benzer bir başka cevap da "içerir" yerine "eşittir" kullanmaktır.

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

— Aydınlatılmış
kaynak

4

Bir hata durumunda sadece bir sınıf eklemek istiyorsanız, th:errorclass="my-error-class"belgede bahsedilenleri kullanabilirsiniz .

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

Bir form alanı etiketine (giriş, seçim, metin alanı…) uygulandığında, aynı etiketteki mevcut herhangi bir addan veya alan özniteliklerinden incelenecek alanın adını okur ve ardından belirtilen CSS sınıfını etikete ekler böyle bir alanda ilişkili herhangi bir hata varsa

— Stephane L
kaynak

2

Birisi için yararlı olabilir diye kendi fikrimi eklemek için. Kullandığım bu.

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

— Charles
kaynak

2

@NewbLeech ve @Charles'ın yayınladığı gibi th: class'ın başka bir kullanımı, ancak "else" durumu yoksa maksimuma basitleştirildi:

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

# Fields.hasErrors ('password') false ise sınıf özelliğini içermez.

— Adrian Adamczyk
kaynak

1

@ Nilsi'nin bahsettiği tamamen doğru. Ancak, adminclass ve user sınıfının tek tırnak içine alınması gerekir, çünkü Thymeleaf'in adminClass veya dizge olması gereken kullanıcı sınıfı değişkenlerini aramasından dolayı bu başarısız olabilir. Bahsedilen,

olmalı: -

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

ya da sadece:

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

— N Djel Okoye
kaynak

0

URL belirli parametreleri içeriyorsa veya içermiyorsa, buna göre sınıf eklemek veya kaldırmak istiyorsanız, bunu yapabilirsiniz.

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

Url 'ev' içeriyorsa, aktif sınıf eklenir ve bunun tersi de geçerlidir.

— Shubh
kaynak

0

Birinin Bootstrap kullanması durumunda, birden fazla sınıf ekleyebildim:

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

— Charlie
kaynak