Verwenden von Thymeleaf th:class, th:classappend, th:style, th:styleappend
View more Tutorials:
Sehr oft brauchen Sie im Thymeleaf die Wert für das Attribut class nach einer Bedingung bilden. Und Sie können th:class oder th:classappend oder die beiden verwenden um das zu machen.
th:class
th:class wird das Attribut class erstellen (oder für das vorhandene Attribut class ersetzen) während Thymeleaf Engine HTML erzeugen.
(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>
Wenn ${isAdmin} als true bewertet wird, bekommen Sie das Ergebnis:
<p class ="admin-class"> Some Text 1 </p> <p class="admin-class"> Some Text 2 </p> <p class="admin-class"> Some Text 3 </p>
Wenn ${isAdmin} als false bewertet wird, bekommen Sie das Ergebnis:
<p class ="user-class"> Some Text 1 </p> <p class="user-class"> Some Text 2 </p> <p> Some Text 3 </p>
th:classappend
Die Verwendung von th:classappend wenn Sie wenn Sie die Wert für das Attribut class fügen (append).
(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>
Wenn ${isAdmin} als true bewertet wird, bekommen Sie das Ergebnis:
<p class ="base-class admin-class"> Some Text 1 </p> <p class = "base-admin-class admin-class"> Some Text 2 </p>
Wenn ${isAdmin} als false bewertet wird, bekommen Sie das Ergebnis:
<p class ="base-class user-class"> Some Text 1 </p> <p class = "base-user-class user-class"> Some Text 2 </p>
Die Verwendung von th:style oder th:styleappend oder der beiden hilft Ihnen bei der Bildung der Wert für das Attribut style nach einer Bedingung.
th:style
th:style wird das Attribut style erstellen (oder das vorhandene Attribut style ersetzen) während Thymeleaf Engine HTML erzeugt.
(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>
Wenn ${isAdmin} als true bewertet wird, bekommen Sie das Ergebenis:
<p style ="color: blue"> Some Text 1 </p> <p style ="color: blue"> Some Text 2 </p> <p class="color: blue"> Some Text 3 </p>
Wenn ${isAdmin} als false bewertet wird, bekommen Sie das Ergebnis:
<p style ="color: black"> Some Text 1 </p> <p style ="color: black"> Some Text 2 </p> <p> Some Text 3 </p>
th:styleappend
Verwenden Sie th:styleappend wenn Sie die Wert für das Attribut style fügen (append).
(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>
Wenn ${isAdmin} als true bewertet wird, bekommen Sie das Ergebnis:
<p style ="background: #eee; color: blue"> Some Text 1 </p> <p style ="font-style: italic; color: blue"> Some Text 2 </p>
Wenn ${isAdmin} als false bewertet wird, bekommen Sie das Ergebnis:
<p style ="background: #eee; color: black"> Some Text 1 </p> <p style ="font-style: italic; color: black"> Some Text 2 </p>