網頁

▼

2021/5/29

Thymeleaf th:classappend 附加 CSS class

Thymeleaf模板頁面使用th:classappend在HTML標籤既有的class屬性值額外附加其他class。


參考「Spring Boot Thymeleaf 簡單範例」的hello.html並修改如下。

hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Hello Thymeleaf</title>
    <style>
        .text-blue {
            color:blue;
        }
        .bg-yellow {
            background-color:yellow;
        }
        .bg-orange {
            background-color:orange;
        }
    </style>
</head>
<body>
    <p th:text="'Hello, ' + ${name} + '!'"
       class="text-blue"
       th:classappend="${name.length() gt 5} ? 'bg-yellow' : 'bg-orange'"/>
</body>
</html>

<p>標籤現有class="text-blue"屬性值，使用th:classappend並判斷name的長度是否大於5，是則附加class bg-yellow，反之附加class bg-orange。

所以當name長度超過5時，返回的html為：

<p class="text-blue bg-yellow">Hello, ...!</p>

反之為

<p class="text-blue bg-orange">Hello, ...!</p>

沒有留言:

張貼留言