Thymeleaf : 조건문을 사용하여 CSS 클래스를 동적으로 추가 / 제거하는 방법 th:if="${condition}">Lorem Ipsum</a>

사용하여 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 인 경우 클래스 속성을 포함하지 않습니다.

How IT