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:
parent
2457413be1
commit
714b47ac25
|
@ -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";
|
||||
}
|
||||
}
|
|
@ -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>
|
Loading…
Reference in New Issue