openplanning

Sử dụng Thymeleaf th:class, th:classappend, th:style, th:styleappend

  1. th:class, th:classappend
  2. th:style, th:styleappend

1. th:class, th:classappend

Rất thường xuyên trong Thymeleaf bạn cần thiết lập giá trị cho thuộc tính (attribute) class dựa trên một điều kiện nào đó. Và bạn có thể sử dụng th:class hoặc th:classappend hoặc cả hai để làm điều này.
th:class
th:class sẽ tạo ra thuộc tính class (hoặc thay thế cho thuộc tính class có sẵn) trong quá trình Thymeleaf Engine tạo ra (generate) HTML.
(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>
Nếu ${isAdmin} được đánh giá là true bạn nhận được kết quả:
<p class ="admin-class">
   Some Text 1
</p>
<p class="admin-class">
   Some Text 2
</p>
<p class="admin-class">
   Some Text 3
</p>
Nếu ${isAdmin} được đánh giá là false bạn nhận được kết quả:
<p class ="user-class">
   Some Text 1
</p>
<p class="user-class">
   Some Text 2
</p>
<p>
  Some Text 3
</p>
th:classappend
Sử dụng th:classappend nếu bạn muốn nối thêm (append) giá trị vào cho thuộc tính class.
(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>
Nếu ${isAdmin} được đánh giá là true bạn nhận được kết quả:
<p class ="base-class admin-class">
   Some Text 1
</p>
<p class = "base-admin-class admin-class">
   Some Text 2
</p>
Nếu ${isAdmin} được đánh giá là false bạn nhận được kết quả:
<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

Sử dụng th:style hoặc th:styleappend hoặc cả hai giúp bạn thiết lập giá trị cho thuộc tính style dựa trên một điều kiện nào đó.
th:style
th:style sẽ tạo ra thuộc tính style (hoặc thay thế cho thuộc tính style có sẵn) trong quá trình Thymeleaf Engine tạo ra HTML.
(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>
Nếu ${isAdmin} được đánh giá là true bạn nhận được kết quả:
<p style ="color: blue">
   Some Text 1
</p>
<p style ="color: blue">
   Some Text 2
</p>
<p class="color: blue">
   Some Text 3
</p>
Nếu ${isAdmin} được đánh giá là false bạn nhận được kết quả:
<p style ="color: black">
   Some Text 1
</p>
<p style ="color: black">
   Some Text 2
</p>
<p>
   Some Text 3
</p>
th:styleappend
Sử dụng th:styleappend nếu bạn muốn nối thêm (append) giá trị vào cho thuộc tính style.
(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>
Nếu ${isAdmin} được đánh giá là true bạn nhận được kết quả:
<p style ="background: #eee; color: blue">
   Some Text 1
</p>
<p style ="font-style: italic; color: blue">
   Some Text 2
</p>
Nếu ${isAdmin} được đánh giá là false bạn nhận được kết quả:
<p style ="background: #eee; color: black">
   Some Text 1
</p>
<p style ="font-style: italic; color: black">
   Some Text 2
</p>

Các bài viết mới nhất

Show More