Thymeleaf: सशर्त वर्ग को गतिशील रूप से जोड़ने / हटाने के लिए सशर्त का उपयोग कैसे करें

Question

टेम्पलेट इंजन के रूप में Thymeleaf का उपयोग करके , क्या क्लॉज़ के divसाथ एक साधारण से / से गतिशील रूप से CSS क्लास को जोड़ना / हटाना संभव है th:if?

आम तौर पर, मैं सशर्त खंड का उपयोग इस प्रकार कर सकता हूं:

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

हम lorem ipsum पेज का लिंक बनाने जा रहे हैं , लेकिन केवल तभी जब क्लॉज सही हो।

मैं कुछ अलग खोज रहा हूं: मैं हमेशा के लिए ब्लॉक को पसंद करूंगा, लेकिन परिस्थिति के अनुसार परिवर्तनशील कक्षाओं के साथ।

Comments

क्या इस बारे में एक stackoverflow.com/questions/35530096/…

— मनोज रमनन

Answer 1

भी है th:classappend।

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

यदि isAdminहै true, तो इसका परिणाम यह होगा:

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

Comments

मुझे लगता है कि यह स्वीकृत उत्तर होना चाहिए। th:classआपकी कक्षा की विशेषता को बदल देता है। th:classappendतुम क्या चाहते हो

— अबुद्ज

वैकल्पिक रूप से आप नियंत्रक से केवल वांछित वर्ग को मॉडल में इंजेक्ट कर सकते हैं, और उसके बादth:classappend="${theRightClass}"

— 14

एक और बात याद रखें कि आप दुर्भाग्य से कई th:classappendगुण नहीं कर सकते हैं । अधिकतम एक की अनुमति है। Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".

— user1053510

क्या th:classremoveदूसरों को प्रभावित किए बिना या आपके बाध्यकारी xml में संपूर्ण क्लास लिस्ट को कोड किए बिना एक भी क्लास को हटाने की कोई आवश्यकता नहीं है? या किसी भी गतिशील वर्ग को छोड़ रहा है और सशर्त रूप से जाने का एकमात्र तरीका है?

— द्राजेन बोजेलोवुक

कैसे करें, यदि 2 से अधिक वर्गों को बदलने की आवश्यकता है

— सिनैथ लक्षिता

Answer 2

हां, स्थिति के अनुसार गतिशील रूप से सीएसएस वर्ग को बदलना संभव है, लेकिन इसके साथ नहीं th:if। यह एल्विस ऑपरेटर के साथ किया जाता है ।

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

Comments

लिंक टूट गया। जब भी पहले एल्विस के बारे में सुना। क्या आपने बनाया?

— लोकलहोस्ट

@atilkan: आप बस Google एल्विस ऑपरेटर को देख सकते हैं और यह टेरनेरी ऑपरेटर का एक संस्करण देख सकते हैं। यहां तक ​​कि विकिपीडिया इसे पहले कुछ पंक्तियों में समझाता है: en.wikipedia.org/wiki/Elvis_operator

— केनी

Answer 3

इस प्रयोजन के लिए और यदि मेरे पास बूलियन चर नहीं है, तो मैं निम्नलिखित का उपयोग करता हूं:

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

Answer 4

एक और समान जवाब "समाहित" के बजाय "बराबर" का उपयोग करना है।

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

Answer 5

यदि आप केवल एक त्रुटि के मामले में एक वर्ग को जोड़ना चाहते हैं तो आप डॉक्टर केth:errorclass="my-error-class" उल्लेख का उपयोग कर सकते हैं ।

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

एक प्रपत्र फ़ील्ड टैग (इनपुट, चयन, टेक्सारिया…) पर लागू होता है, यह किसी भी मौजूदा नाम या वें से फ़ील्ड की जांच करने का नाम पढ़ेगा: उसी टैग में फ़ील्ड विशेषताएँ, और फिर निर्दिष्ट सीएसएस वर्ग को टैग में संलग्न करें यदि इस तरह की फ़ील्ड में कोई संबद्ध त्रुटि है

Answer 6

बस अपनी राय जोड़ने के लिए, यदि यह किसी के लिए उपयोगी हो सकता है। यही मैंने उपयोग किया है।

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

Answer 7

फिर भी th: class का एक और उपयोग, @NewbLeech और @Charles के रूप में पोस्ट किया गया है, लेकिन अगर "और" मामला नहीं है तो अधिकतम सरलीकृत किया गया है:

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

यदि # फ़ील्ड.शहर ('पासवर्ड') गलत है, तो वर्ग विशेषता शामिल नहीं करता है।

Answer 8

@ निली ने जो उल्लेख किया है वह पूरी तरह सही है। हालाँकि, व्यवस्थापकक्लास और उपयोगकर्ता वर्ग को एकल उद्धरणों में लपेटने की आवश्यकता है क्योंकि यह Thymeleaf के लिए असफल हो सकता है AdminClass या userclass चर की तलाश में जो तार होना चाहिए। ने कहा कि,

यह होना चाहिए: -

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

या केवल:

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

Answer 9

अगर आप अपने अनुसार क्लास जोड़ना या हटाना चाह रहे हैं, अगर url में कुछ params हैं या नहीं। यह वही है जो आप कर सकते हैं

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

यदि url में 'होम' है तो सक्रिय वर्ग जोड़ा जाएगा और इसके विपरीत।

Answer 10

बस अगर कोई बूटस्ट्रैप का उपयोग कर रहा है, तो मैं एक से अधिक वर्ग जोड़ने में सक्षम था:

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