Thymeleaf: cách sử dụng điều kiện để thêm / xóa động một lớp CSS

Bằng cách sử dụng Thymeleaf như mẫu động cơ, là nó có thể Add / Remove động một lớp CSS đến / từ một đơn giản divvới th:ifkhoản?

Thông thường, tôi có thể sử dụng mệnh đề điều kiện như sau:

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

Chúng tôi sẽ tạo một liên kết đến trang ipsum lorem , nhưng chỉ khi mệnh đề điều kiện là đúng.

Tôi đang tìm kiếm một thứ gì đó khác biệt: Tôi muốn khối luôn hiển thị, nhưng với các lớp có thể thay đổi tùy theo tình huống.

Ngoài ra còn có th:classappend.

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

Nếu isAdminlà true, thì điều này sẽ dẫn đến:

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

Có, có thể thay đổi động một lớp CSS tùy theo tình huống, nhưng với th:if. Điều này được thực hiện với toán tử elvis .

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

Vì mục đích này và nếu tôi không có biến boolean, tôi sử dụng như sau:

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

Một câu trả lời tương tự khác là sử dụng "bằng" thay vì "chứa".

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

Nếu bạn chỉ muốn thêm một lớp trong trường hợp có lỗi, bạn có thể sử dụng được th:errorclass="my-error-class"đề cập trong tài liệu .

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

Được áp dụng cho thẻ trường biểu mẫu (input, select, textarea…), nó sẽ đọc tên của trường được kiểm tra từ bất kỳ thuộc tính name hoặc th: field hiện có nào trong cùng một thẻ và sau đó nối lớp CSS đã chỉ định vào thẻ nếu trường đó có bất kỳ lỗi nào liên quan

Chỉ để thêm ý kiến ​​của riêng tôi, trong trường hợp nó có thể hữu ích cho ai đó. Đây là những gì tôi đã sử dụng.

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

Tuy nhiên, một cách sử dụng khác của th: class, giống như @NewbLosystem và @Charles đã được đăng, nhưng được đơn giản hóa đến mức tối đa nếu không có trường hợp "khác":

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

Không bao gồm thuộc tính lớp nếu # fields.hasErrors ('password') là false.

Những gì @Nilsi đề cập là hoàn toàn chính xác. Tuy nhiên, adminclass và lớp người dùng cần được đặt trong dấu ngoặc kép vì điều này có thể không thành công do Thymeleaf đang tìm kiếm các biến adminClass hoặc userclass phải là chuỗi. Mà nói,

nó phải là: -

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

hoặc chỉ:

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

Nếu bạn đang tìm cách thêm hoặc xóa lớp cho phù hợp nếu url có chứa một số tham số nhất định hay không. Đây là những gì bạn có thể làm

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

Nếu url chứa 'home' thì lớp hoạt động sẽ được thêm vào và ngược lại.

Chỉ trong trường hợp ai đó đang sử dụng Bootstrap, tôi có thể thêm nhiều hơn một lớp:

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