Utiliser Thymeleaf th:class, th:classappend, th:style, th:styleappend

View more Tutorials:

Tutoriels Thymeleaf

th:class, th:classappend
th:style, th:styleappend

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.

Facebook

1- th:class, th:classappend

Très souvent, dans Thymeleaf, vous devez configurer des valeurs pour l'attribut (attribute) class en fonction d'une condition. Et vous pouvez utiliser th:class ou th:classappend ou les deux pour le faire.

th:class

th:class va créer l'attribut class (ou remplacer l'attribut class disponible) lors de la génération (generate) HTML par le 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>

Si ${isAdmin} est évalué comme true, vous obtenez le résultat :


<p class ="admin-class">
   Some Text 1
</p>
<p class="admin-class">
   Some Text 2
</p>
<p class="admin-class">
   Some Text 3
</p>

Si ${isAdmin} est évalué comme false, vous obtenez le résultat :


<p class ="user-class">
   Some Text 1
</p>
<p class="user-class">
   Some Text 2
</p>
<p>
  Some Text 3
</p>

th:classappend

Utilisez th:classappend si vous voulez ajouter (append) des valeurs pour l'attribut de 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>

Si ${isAdmin} est évalué comme true vous recevrez le résultat :


<p class ="base-class admin-class">
   Some Text 1
</p>
<p class = "base-admin-class admin-class">
   Some Text 2
</p>

Si ${isAdmin} est évalué comme false vous recevrez le résultat :


<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

L'utilisation th:style ou th:styleappend ou toutes les deux vous permet de configurer des valeurs pour les attributs style basés sur une condition.

th:style

th:style va créer un attribut style (ou remplacer l'attribut style disponible) lors de la génération de HTML par le 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>

Si ${isAdmin} est évalué comme true vous recevrez le résultat :


<p style ="color: blue">
   Some Text 1
</p>
<p style ="color: blue">
   Some Text 2
</p>
<p class="color: blue">
   Some Text 3
</p>

Si ${isAdmin} est évalué comme false vous recevrez le résultat :


<p style ="color: black">
   Some Text 1
</p>
<p style ="color: black">
   Some Text 2
</p>
<p>
   Some Text 3
</p>

th:styleappend

Utilisez th:styleappend si vous voulez ajouter (append) des valeurs aux attributs 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>

Si ${isAdmin} est évalué comme true vous recevrez le résultat :


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

Si ${isAdmin} est évalué comme false vous recevrez le résultat :


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

View more Tutorials:

Tutoriels Thymeleaf