การใช้Thymeleafเป็นเครื่องมือแม่แบบเป็นไปได้หรือไม่ที่จะเพิ่ม / ลบคลาส CSS แบบไดนามิกไปยัง / จากรูปแบบง่ายๆdivด้วยth:ifอนุประโยค?
โดยปกติฉันสามารถใช้ประโยคเงื่อนไขดังนี้:
<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a>
เราจะสร้างลิงค์ไปยังเพจlorem ipsumแต่เงื่อนไขเงื่อนไขเป็นจริงเท่านั้น
ฉันกำลังมองหาสิ่งที่แตกต่าง: ฉันต้องการให้บล็อกปรากฏอยู่เสมอ แต่มีคลาสที่เปลี่ยนแปลงได้ตามสถานการณ์
คำตอบ:
th:classappendนอกจากนี้ยังมี
<a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"></a>
หากisAdminเป็นtrueเช่นนั้นสิ่งนี้จะส่งผลให้:
<a href="" class="baseclass adminclass"></a>
th:classแทนที่ / เขียนแอตทริบิวต์คลาสของคุณใหม่ th:classappendคือสิ่งที่คุณต้องการ
th:classappend="${theRightClass}"
th:classappendคุณสมบัติหลายอย่างได้ อนุญาตสูงสุดหนึ่งรายการ Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
th:classremoveการลบคลาสเดียวโดยไม่ส่งผลกระทบต่อผู้อื่นหรือการเข้ารหัสรายการคลาสทั้งหมดใน xml ที่มีผลผูกพันของคุณหรือไม่? หรือกำลังออกจากคลาสไดนามิกใด ๆ และต่อท้ายวิธีเดียวที่จะไปตามเงื่อนไข?
เพื่อจุดประสงค์นี้และถ้าฉันไม่มีตัวแปรบูลีนฉันใช้สิ่งต่อไปนี้:
<li th:class="${#strings.contains(content.language,'CZ')} ? active : ''">
อีกคำตอบที่คล้ายกันมากคือการใช้ "เท่ากับ" แทน "มี"
<li th:class="${#strings.equals(pageTitle,'How It Works')} ? active : ''">
หากคุณต้องการต่อท้ายคลาสในกรณีที่มีข้อผิดพลาดคุณสามารถใช้ที่th:errorclass="my-error-class"กล่าวถึงในเอกสารได้
<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />
นำไปใช้กับแท็กฟิลด์ฟอร์ม (อินพุตเลือกพื้นที่ข้อความ ... ) จะอ่านชื่อของฟิลด์ที่จะตรวจสอบจากชื่อที่มีอยู่หรือแอตทริบิวต์ฟิลด์ th: ในแท็กเดียวกันจากนั้นต่อท้ายคลาส CSS ที่ระบุเข้ากับแท็ก หากฟิลด์ดังกล่าวมีข้อผิดพลาดที่เกี่ยวข้อง
แค่เพิ่มความคิดเห็นของตัวเองเผื่อว่าอาจมีประโยชน์กับใครบางคน นี่คือสิ่งที่ฉันใช้
<div th:class="${request.read ? 'mdl-color-text--grey-800 w500' : ''}"> </div>
ยังมีการใช้ th: class อื่นเช่นเดียวกับที่ @NewbLeech และ @Charles ได้โพสต์ แต่จะทำให้ง่ายที่สุดหากไม่มีกรณี "else":
<input th:class="${#fields.hasErrors('password')} ? formFieldHasError" />
ไม่รวมแอตทริบิวต์คลาสถ้า # fields.hasErrors ('password') เป็นเท็จ
สิ่งที่ @Nilsi กล่าวถึงนั้นถูกต้องสมบูรณ์ อย่างไรก็ตามแอดมินคลาสและคลาสผู้ใช้จะต้องมีเครื่องหมายคำพูดเดียวเนื่องจากอาจล้มเหลวเนื่องจาก Thymeleaf กำลังมองหาตัวแปร adminClass หรือ userclass ซึ่งควรเป็นสตริง ที่กล่าวว่า
มันควรจะเป็น: -
<a href="" class="baseclass" th:classappend="${isAdmin} ? 'adminclass' :
'userclass'">
</a>
หรือเพียงแค่:
<a href="" th:class="${isAdmin} ? 'newclass' :
'baseclass'">
</a>
หากคุณต้องการเพิ่มหรือลบคลาสตามว่า url มีพารามิเตอร์บางอย่างหรือไม่นี่คือสิ่งที่คุณสามารถทำได้
<a th:href="@{/admin/home}" th:class="${#httpServletRequest.requestURI.contains('home')} ? 'nav-link active' : 'nav-link'" >
หาก url มี 'home' คลาสที่ใช้งานอยู่จะถูกเพิ่มและในทางกลับกัน
ในกรณีที่มีคนใช้ Bootstrap ฉันสามารถเพิ่มได้มากกว่าหนึ่งคลาส:
<a href="" class="baseclass" th:classappend="${isAdmin} ?: 'text-danger font-italic' "></a>