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

99

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

通常，我可以使用如下条件语句：

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

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

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

— 腺病毒
source

那这个stackoverflow.com/questions/35530096/…呢？

— Manoj Ramanan

243

也有th:classappend。

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

如果isAdmin为true，则将导致：

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

— 尼尔西
source

3

我认为这应该是公认的答案。th:class替换/重写您的class属性。th:classappend是你想要的。

— Aboodz

另外，您也可以从控制器中将所需的类注入模型，然后进行th:classappend="${theRightClass}"

— demaniak

1

需要记住的另一件事是，您不能拥有多个th:classappend属性。最多允许一个。

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

— user1053510

有没有th:classremove在不影响其他类的情况下删除单个类或在绑定xml中硬编码整个类列表的方法？还是要关闭任何动态类并有条件地附加唯一的方法？

— Drazen Bjelovuk '18

怎么做，如果需要改变两个以上的班级

— Sineth Lakshitha

34

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

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

— 米歇尔·比斯玛（Michiel Bijlsma）
source

链接断开。以前从未听说过猫王。你化妆了吗

— localhoost

@atilkan：您可以简单地用Google Elvis运算符查看它是Ternary运算符的变体。甚至维基百科都在前几行中对此进行了解释：en.wikipedia.org/wiki/Elvis_operator

— 肯尼

7

为此，如果我没有布尔变量，请使用以下命令：

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

— 忽悠
source

5

另一个非常相似的答案是使用“等于”而不是“包含”。

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

— 点燃
source

4

如果您只是想在发生错误的情况下添加类，则可以使用文档中th:errorclass="my-error-class"提到的内容。

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

应用于表单字段标签（输入，选择，文本区域...），它将从同一标签中的任何现有名称或th：field属性读取要检查的字段的名称，然后将指定的CSS类附加到标签如果该字段有任何相关的错误

— 斯蒂芬·L
source

2

只是添加我自己的意见，以防对某人有用。这就是我用的。

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

— 查尔斯
source

2

已发布th：class的另一种用法，与@NewbLeech和@Charles相同，但如果没有“ else”情况，则简化为最大用法：

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

如果＃fields.hasErrors（'password'）为false，则不包括类属性。

— 阿德里安·亚当奇克（Adrian Adamczyk）
source

1

@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>

— N·杰尔·奥科耶
source

0

如果您要在URL中是否包含某些参数的情况下相应地添加或删除类，则可以这样做。

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

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

— 舒布
source

0

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

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

— 查理
source