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

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

템플릿 엔진으로 타이메리프를 사용함으로써 CSS 클래스를 심플에서 동적으로 추가하거나 삭제할 수 있습니다.div와 함께th:if조항?

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

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

lorem ipsum 페이지에 대한 링크를 만듭니다.단, condition 절이 true인 경우에만 해당됩니다.

뭔가 다른 걸 찾고 있어요블록은 항상 보여 주지만 상황에 따라 클래스가 변경되도록 하고 싶습니다.

또 있다th:classappend.

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

한다면isAdmin이true그 결과, 다음과 같은 결과가 됩니다.

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

예, 상황에 따라 CSS 클래스를 동적으로 변경할 수 있지만, CSS 클래스는 변경할 수 없습니다.th:if이건 엘비스 교환원이 한 짓이야

<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 : ''">

에러에 대비하여 클래스를 추가하려는 경우th:errorclass="my-error-class"문서에 언급되어 있습니다.

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

폼 필드 태그(input, select, text area...)에 적용되면 동일한 태그의 기존 이름 또는 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가 말한 것은 완전히 옳다.단, Tymeleaf가 adminClass 또는 사용자 클래스 변수(문자열이어야 함)를 찾기 때문에 실패할 수 있으므로 adminclass와 사용자 클래스는 작은 따옴표로 묶어야 합니다.그렇긴 한데

다음 중 하나여야 합니다.

 <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>

언급URL : https://stackoverflow.com/questions/25133807/thymeleaf-how-to-use-conditionals-to-dynamically-add-remove-a-css-class