[thymeleaf] 클래스 동적추가 th:classappend 사용방법

 

안녕하세요, thymeleaf에서 클래스를 동적으로 추가하는 방법에 대해서 알아보도록 하겠습니다.

 

thymeleaf 클래스 동적 추가 th:classappend 사용방법

1. 기존 태그의 클래스에 값 추가

<!-- th:classappend 추가하기 전 -->
<ul class="sidebar-menu" data-widget="tree">
    <li class="treeview" th:classappend="active">메뉴1</li>
</ui>

<!-- th:classappend 추가한 후 결과 -->
<ul class="sidebar-menu" data-widget="tree">
    <li class="treeview active">메뉴1</li>
</ui>

 

2. 기존 태그에 조건을 추가하여 클래스에 값 추가

<!-- th:classappend 추가하기 전 -->
<ul class="sidebar-menu" data-widget="tree">
    <li class="treeview" th:classappend="${item.menu == 'content'} ? 'active' : ''">메뉴1</li>
</ui>

<!-- th:classappend 추가한 후 결과 -->
<ul class="sidebar-menu" data-widget="tree">
    <li class="treeview active">메뉴1</li>
</ui>

 

반응형

 

3. th:attrappend 사용하여 값 추가

<!-- th:attrprepend 추가하기 전 -->
<ul class="sidebar-menu" data-widget="tree">
    <li class="treeview" th:attrprepend="class='active '">메뉴1</li>
</ui>

<!-- th:attrprepend 추가한 후 결과 -->
<ul class="sidebar-menu" data-widget="tree">
    <li class="active treeview">메뉴1</li>
</ui>

 

 

4. th:attrappend 사용하여 값 추가

<!-- th:attrappend 추가하기 전 -->
<ul class="sidebar-menu" data-widget="tree">
    <li class="treeview" th:attrappend="class= 'active ">메뉴1</li>
</ui>

<!-- th:attrappend 추가한 후 결과 -->
<ul class="sidebar-menu" data-widget="tree">
    <li class="treeview active">메뉴1</li>
</ui>

오늘도 정독해 주셔서 감사합니다~ :)

 

 

[thymeleaf] 타임리프 날짜 date format 변환