betacode

Использование Thymeleaf th:class, th:classappend, th:style, th:styleappend

View more Tutorials:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- th:class, th:classappend

Очень часто в Thymeleaf вам нужно настроит значение атрибуту (attribute) class основываясь на а определенном условии. И вы можете использовать th:class или th:classappend или оба могуть это сделать.
th:class
th:class создает атрибут class (или заменяет готовому атрибуту class) в процессе Thymeleaf Engine генерирует (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>
Если ${isAdmin} оценивается как true, вы получаете результат:

<p class ="admin-class">
   Some Text 1
</p>
<p class="admin-class">
   Some Text 2
</p>
<p class="admin-class">
   Some Text 3
</p>
Если ${isAdmin} оценивается как false, вы получаете результат:

<p class ="user-class">
   Some Text 1
</p>
<p class="user-class">
   Some Text 2
</p>
<p>
  Some Text 3
</p>
th:classappend
Используйте th:classappend если вы хотите добавить (append) значение атрибуту 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>
Если ${isAdmin} оценивается как true вы получаете результат:

<p class ="base-class admin-class">
   Some Text 1
</p>
<p class = "base-admin-class admin-class">
   Some Text 2
</p>
Если ${isAdmin} оценивается как​​​​​​​ false вы получаете результат:

<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

Используйте th:style или th:styleappend или оба помогут вам установить значение для атрибута style, основываясь на определенном условии.
th:style
th:style создает атрибут style (или заменят готовый атрибут style) в процессе Thymeleaf Engine генерирующий 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>
Если ${isAdmin} оценивается как true, вы получаете результат:

<p style ="color: blue">
   Some Text 1
</p>
<p style ="color: blue">
   Some Text 2
</p>
<p class="color: blue">
   Some Text 3
</p>
Если ${isAdmin} оценивается как ​​​​​​​false, вы получаете результат:

<p style ="color: black">
   Some Text 1
</p>
<p style ="color: black">
   Some Text 2
</p>
<p>
   Some Text 3
</p>
th:styleappend
Используйте th:styleappend если вы хотите добавить (append) значение для атрибута 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>
Если ${isAdmin} оценивается как true, вы получаете результат:

<p style ="background: #eee; color: blue">
   Some Text 1
</p>
<p style ="font-style: italic; color: blue">
   Some Text 2
</p>
Если​​​​​​​ ${isAdmin} оценивается как​​​​​​​ false, вы получаете результат:

<p style ="background: #eee; color: black">
   Some Text 1
</p>
<p style ="font-style: italic; color: black">
   Some Text 2
</p>

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.