Thymeleaf th:class, th:classappend, th:style, th:styleappend
1. th:class, th:classappend
No ADS
Very often, in the Thymeleaf, you need to set up values for the class attribute based on a condition. And you can use th:class or th:classappend or both to do this.
th:class
th:class will create the class attribute (or replace the available class attribute) during generating HTML by the Thymeleaf Engine.
(Template)
<p class ="user-class" th:class="${isAdmin} ? admin-class : user-class ">
Some Text 1
</p>
<p th:class="${isAdmin} ? admin-class : user-class ">
Some Text 2
</p>
<p th:class="${isAdmin} ? admin-class : '' ">
Some Text 3
</p>
If ${isAdmin} is evaluated as true, you get the result:
<p class ="admin-class">
Some Text 1
</p>
<p class="admin-class">
Some Text 2
</p>
<p class="admin-class">
Some Text 3
</p>
If ${isAdmin} is evaluated as false , you get the result:
<p class ="user-class">
Some Text 1
</p>
<p class="user-class">
Some Text 2
</p>
<p>
Some Text 3
</p>
th:classappend
Use th:classappend if you want to append values for the class attribute.
(Template)
<p class ="base-class" th:classappend="${isAdmin} ? admin-class : user-class">
Some Text 1
</p>
<p th:class = "${isAdmin} ? base-admin-class : base-user-class"
th:classappend ="${isAdmin} ? admin-class : user-class">
Some Text 2
</p>
If ${isAdmin} is evaluated as true, you get the result:
<p class ="base-class admin-class">
Some Text 1
</p>
<p class = "base-admin-class admin-class">
Some Text 2
</p>
If ${isAdmin} is evaluated as false you get the result:
<p class ="base-class user-class">
Some Text 1
</p>
<p class = "base-user-class user-class">
Some Text 2
</p>
2. th:style, th:styleappend
No ADS
Use th:style or th:styleappend or both helps you establish values for the style attributes based on a condition.
th:style
th:style will create a the style attribute (or replace the available style attribute) during generating HTML by the Thymeleaf Engine.
(Template)
<p style ="color: blue;" th:style = "${isAdmin} ? 'color: blue' : 'color: black' ">
Some Text 1
</p>
<p th:style ="${isAdmin} ? 'color: blue' : 'color: black' ">
Some Text 2
</p>
<p th:style ="${isAdmin} ? 'color: blue' : '' ">
Some Text 3
</p>
If ${isAdmin} is evaluated as true , you get the result:
<p style ="color: blue">
Some Text 1
</p>
<p style ="color: blue">
Some Text 2
</p>
<p class="color: blue">
Some Text 3
</p>
If ${isAdmin} is evaluated as false , you get the result:
<p style ="color: black">
Some Text 1
</p>
<p style ="color: black">
Some Text 2
</p>
<p>
Some Text 3
</p>
th:styleappend
Use th:styleappend you want to append values for the style attribute.
(Template)
<p style ="background: #eee;" th:styleappend = "${isAdmin} ? 'color: blue' : 'color: black' ">
Some Text 1
</p>
<p th:style ="${isAmin} ? 'font-style: bold;' : 'font-style: italic;'"
th:styleappend ="${isAdmin} ? 'color: blue' : 'color: black' ">
Some Text 2
</p>
If ${isAdmin} is evaluated as true you get the result:
<p style ="background: #eee; color: blue">
Some Text 1
</p>
<p style ="font-style: italic; color: blue">
Some Text 2
</p>
If ${isAdmin} is evaluated as false you get the result:
<p style ="background: #eee; color: black">
Some Text 1
</p>
<p style ="font-style: italic; color: black">
Some Text 2
</p>
No ADS
Thymeleaf Tutorials
- Thymeleaf Elvis Operator Tutorial with Examples
- Thymeleaf Loops Tutorial with Examples
- Thymeleaf Conditional statements: if, unless, switch
- Thymeleaf Predefined Objects Tutorial with Examples
- Thymeleaf th:class, th:classappend, th:style, th:styleappend
- Introduction to Thymeleaf
- Thymeleaf Variables Tutorial with Examples
- Thymeleaf Fragments Tutorial with Examples
- Thymeleaf Page Layouts Tutorial with Examples
- Thymeleaf th:object and Asterisk Syntax *{ }
- Thymeleaf Form Select option Example
Show More