Thymeleaf : 조건문을 사용하여 CSS 클래스를 동적으로 추가 / 제거하는 방법

사용하여 Thymeleaf을 템플릿 엔진으로, 그것은 간단한에서 /에 동적으로 / CSS 클래스를 제거를 추가 할 수 있습니다 div와 th:if절?

일반적으로 다음과 같이 조건절을 사용할 수 있습니다.

<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a> 

lorem ipsum 페이지에 대한 링크를 생성 하지만 조건 절이 참인 경우에만 해당됩니다.

다른 것을 찾고 있습니다. 블록이 항상 표시되기를 원하지만 상황에 따라 변경 가능한 클래스가 있습니다.

도 있습니다 th:classappend.

<a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"></a>

경우 isAdmin이며 true, 다음이 발생합니다 :

<a href="" class="baseclass adminclass"></a>

예, 상황에 따라 CSS 클래스를 동적으로 변경할 수 있지만 th:if. 이것은 elvis 연산자로 수행됩니다 .

<a href="lorem-ipsum.html" th:class="${isAdmin}? adminclass : userclass">Lorem Ipsum</a> 

이를 위해 부울 변수가 없으면 다음을 사용합니다.

<li th:class="${#strings.contains(content.language,'CZ')} ? active : ''">

또 다른 매우 유사한 대답은 "contains"대신 "equals"를 사용하는 것입니다.

<li th:class="${#strings.equals(pageTitle,'How It Works')} ? active : ''">

오류가 발생한 경우 클래스를 추가하고 싶다면 doc에th:errorclass="my-error-class" 언급 된 것을 사용할 수 있습니다 .

<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />

양식 필드 태그 (입력, 선택, 텍스트 영역…)에 적용되며, 동일한 태그의 기존 이름 또는 th : field 속성에서 검사 할 필드의 이름을 읽은 다음 지정된 CSS 클래스를 태그에 추가합니다. 해당 필드에 관련 오류가있는 경우

누군가에게 유용 할 경우를 대비해 내 의견을 추가하기 위해. 이것이 제가 사용한 것입니다.

<div th:class="${request.read ? 'mdl-color-text--grey-800 w500' : ''}"> </div>

@NewbLeech 및 @Charles가 게시 한 것과 동일한 th : class의 또 다른 사용법이 있지만 "else"사례가없는 경우 최대로 단순화되었습니다.

<input th:class="${#fields.hasErrors('password')} ? formFieldHasError" />

# fields.hasErrors ( 'password')가 false 인 경우 클래스 속성을 포함하지 않습니다.

@Nilsi가 언급 한 것은 완벽하게 정확합니다. 그러나 adminclass 및 user 클래스는 Thymeleaf가 문자열이어야하는 adminClass 또는 userclass 변수를 찾기 때문에 실패 할 수 있으므로 작은 따옴표로 묶어야합니다. 즉,

그것은해야한다: -

 <a href="" class="baseclass" th:classappend="${isAdmin} ? 'adminclass' : 
 'userclass'"> 
 </a>

또는 그냥 :

<a href="" th:class="${isAdmin} ? 'newclass' : 
  'baseclass'"> 
 </a>

URL에 특정 매개 변수가 포함되어 있는지 여부에 따라 그에 따라 클래스를 추가하거나 제거하려는 경우이 작업을 수행 할 수 있습니다.

<a th:href="@{/admin/home}"  th:class="${#httpServletRequest.requestURI.contains('home')} ? 'nav-link active' : 'nav-link'"  >

URL에 'home'이 포함되어 있으면 활성 클래스가 추가되고 그 반대의 경우도 마찬가지입니다.

누군가 Bootstrap을 사용하는 경우를 대비하여 두 개 이상의 클래스를 추가 할 수있었습니다.

<a href="" class="baseclass" th:classappend="${isAdmin} ?: 'text-danger font-italic' "></a>