[Thymeleaf] 동적으로 클래스 지정, 추가하기(th:class / th:classappend)

 

 

 

 

Thymeleaf의 th:class와 th:classappend를 사용하여

동적으로 class를 지정, 추가할 수 있습니다.

 

 

 

 

 

th:class

---

th:class를 이용하여, 동적으로 class를 지정할 수 있습니다.

<p class="aaa-class" th:class="${player eq 'Y'} ? bbb-class : ccc-class ">
    Text aaa
</p> 
<p th:class="${player eq 'Y'} ? xxx-class : zzz-class ">
   Text bbb
</p> 
<p th:class="${player eq 'Y'} ? hhh-class : '' ">
   Text ccc
</p>


//player == Y
<p class="bbb-class">
    Text aaa
</p> 
<p class="xxx-class">
   Text bbb
</p> 
<p class="hhh-class">
   Text ccc
</p>


//player != Y
<p class="ccc-class">
    Text aaa
</p> 
<p class="zzz-class">
   Text bbb
</p> 
<p>
   Text ccc
</p>

 

 

 

 

 

th:classappend

---

th:classappend를 이용하여, 기존 class에 동적으로 class 값을 추가할 수 있습니다.

<p class="aaa-class" th:classappend="${player eq 'Y'} ? bbb-class : ccc-class">
    Text 1
</p> 
<p th:class = "${player eq 'Y'} ? xxx-class : zzz-class"
   th:classappend ="${player eq 'Y'} ? ttt-class : vvv-class">
   Text 2
</p>

//player == Y
<p class="aaa-class bbb-class">
    Text 1
</p> 
<p class="xxx-class ttt-class">
   Text 2
</p>

//player != Y
<p class="aaa-class ccc-class">
    Text 1
</p> 
<p class="zzz-class vvv-class">
   Text 2
</p>