web-dev-qa-db-ja.com

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

テンプレートエンジンとして Thymeleaf を使用することにより、単純なdivth:if句を使用して？

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

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

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

私は別のものを探しています：私はブロックを常に見えるようにしたいのですが、状況に応じてクラスを変更できます。

htmlcssthymeleaf
82
vdenotaris

th:classappendもあります。

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

isAdminがtrueの場合、これは次のようになります。

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

はい、CSSクラスを状況に応じて動的に変更できますが、th:ifを使用して変更することはできません。これは elvis operator を使用して実行されます。

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

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

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

この目的のために、またブール変数を持っていない場合は、次を使用します：

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

エラーが発生した場合にクラスを追加するだけの場合は、 ドキュメント で言及されているth:errorclass="my-error-class"を使用できます。

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

フォームフィールドタグ（input、select、textarea…）に適用すると、同じタグ内の既存の名前またはth：field属性から検査するフィールドの名前を読み取り、指定したCSSクラスをタグに追加します。そのようなフィールドに関連するエラーがある場合

3
Stephane L

Th：classのさらに別の使用法は、@ NewbLeechや@Charlesと同じですが、「else」のケースがない場合は最大限に単純化されています。

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

＃fields.hasErrors（ 'password'）がfalseの場合、クラス属性は含まれません。

2
Adrian Adamczyk

誰かに役立つかもしれない場合に備えて、私自身の意見を追加するために。これは私が使用したものです。

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