Thymeleaf：条件文を使用してCSSクラスを動的に追加/削除する方法

使用してThymeleafのテンプレートエンジンとして、それは単純なものから動的に/へのCSSクラスを追加/削除することが可能であるdivとのth:if句？

通常、次のように条件句を使用できます。

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

lorem ipsumページへのリンクを作成しますが、条件句がtrueの場合のみです。

何か別のものを探しています。ブロックを常に表示したいのですが、状況に応じてクラスを変更できます。

もあり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 : ''">

別の非常によく似た答えは、「含む」の代わりに「等しい」を使用することです。

<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、textarea…）に適用すると、同じタグ内の既存の名前または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が述べたことは完全に正しい。ただし、管理クラスとユーザークラスは一重引用符で囲む必要があります。これは、Thymeleafが文字列である必要がある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'が含まれている場合、アクティブなクラスが追加され、逆も同様です。

誰かがブートストラップを使用している場合に備えて、私は複数のクラスを追加することができました。

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