iSharkFly-Docs
/
java-tutorials
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a Spring controller that serves a Thymeleaf HTML page with all the examples from the article. (#9514) 

Co-authored-by: Jordan Simpson <jordan.simpson.dev@gmail.com>
This commit is contained in:
Jordan Simpson 2020-06-18 22:03:56 -05:00 committed by GitHub
parent 2457413be1
commit 714b47ac25
2 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/conditionalclasses/ConditionalClassesController.java Normal file
View File

@ -0,0 +1,15 @@
package com.baeldung.thymeleaf.conditionalclasses;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ConditionalClassesController {
@GetMapping("/conditional-classes")
public String getConditionalClassesPage( Model model) {
model.addAttribute("condition", true);
return "conditionalclasses/conditionalclasses";
}
}

42
spring-thymeleaf-3/src/main/resources/templates/conditionalclasses/conditionalclasses.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Conditional CSS Classes in Thymeleaf</title>
</head>
<body>
<h2>The Goal</h2>
<p>
<span class="base condition-true">
I have two classes: "base" and either "condition-true" or "condition-false" depending on a server-side condition.
</span>
</p>
<h2>Using th:if</h2>
<p>
<span th:if="${condition}" class="base condition-true">
This HTML is duplicated. We probably want a better solution.
</span>
<span th:if="${!condition}" class="base condition-false">
This HTML is duplicated. We probably want a better solution.
</span>
</p>
<h2>Using th:attr</h2>
<p>
<span th:attr="class=${condition ? 'base condition-true' : 'base condition-false'}">
This HTML is consolidated, which is good, but the Thymeleaf attribute still has some redundancy in it.
</span>
</p>
<h2>Using th:class</h2>
<p>
<span th:class="'base '+${condition ? 'condition-true' : 'condition-false'}">
The base CSS class still has to be appended with String concatenation. We can do a little bit better.
</span>
</p>
<h2>Using th:classappend</h2>
<p>
<span class="base" th:classappend="${condition ? 'condition-true' : 'condition-false'}">
This HTML is consolidated, and the conditional class is appended separately from the static base class.
</span>
</p>
</body>
</html>