Thymeleaf：如何使用条件动态添加/删除 CSS 类

Question

通过使用Thymeleaf作为模板引擎，是否可以使用th:if子句在简单的div中动态添加/删除 CSS 类？

通常，我可以按如下方式使用条件子句：

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

我们将创建一个到lorem ipsum页面的链接，但前提是条件子句为真。

我正在寻找不同的东西：我希望块始终可见，但根据情况使用可更改的类。

Answer 1

还有th:classappend 。

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

如果isAdmin是true ，那么这将导致：

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

Answer 2

是的，可以根据情况动态更改 CSS 类，但不能使用th:if 。 这是通过elvis 运算符完成的。

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

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"在doc 中提到。

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

应用于表单字段标签（input、select、textarea...），它将从任何现有名称或同一标签中的th:field属性中读取要检查的字段的名称，然后将指定的CSS类附加到标签中如果该字段有任何相关错误

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" />

如果 #fields.hasErrors('password') 为 false，则不包括 class 属性。

Answer 8

@Nilsi 提到的是完全正确的。 但是， adminclass 和 user class 需要用单引号括起来，因为这可能会由于 Thymeleaf 寻找 adminClass 或 userclass 变量而失败，这些变量应该是字符串。 那说，

它应该是： -

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

要不就：

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

Answer 9

如果您希望在 url 包含某些参数或不包含某些参数时相应地添加或删除类。这就是您可以做的

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

如果 url 包含“home”，则将添加活动类，反之亦然。

Answer 10

以防万一有人使用 Bootstrap，我可以添加多个类：

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