Thymeleaf: Verwendung von Bedingungen zum dynamischen Hinzufügen / Entfernen einer CSS-Klasse

99

Durch die Verwendung von Thymeleaf als Template - Engine ist es möglich , hinzufügen / entfernen dynamisch eine CSS - Klasse zu / von einem einfachen divmit der th:ifKlausel?

Normalerweise könnte ich die Bedingungsklausel wie folgt verwenden:

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

Wir werden einen Link zur Lorem Ipsum- Seite erstellen , aber nur, wenn die Bedingungsklausel wahr ist.

Ich suche etwas anderes: Ich möchte, dass der Block immer sichtbar ist, aber mit je nach Situation veränderbaren Klassen.

— vdenotaris
quelle

Was ist mit diesem einen stackoverflow.com/questions/35530096/…

— Manoj Ramanan

243

Es gibt auch th:classappend.

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

Wenn dies der Fall isAdminist true, führt dies zu:

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

— Nilsi
quelle

3

Ich denke, das sollte die akzeptierte Antwort sein. th:classersetzt / schreibt Ihr Klassenattribut neu. th:classappendist was du willst.

— Aboodz

Alternativ können Sie einfach die gewünschte Klasse vom Controller in das Modell th:classappend="${theRightClass}"

— einfügen

1

Eine weitere Sache, an die Sie sich erinnern sollten, ist, dass Sie leider nicht mehrere th:classappendAttribute haben können. Max eins ist erlaubt.

Fatal error during parsing    org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".

— user1053510

Gibt es keine th:classremoveMöglichkeit, eine einzelne Klasse zu entfernen, ohne die anderen zu beeinflussen oder eine gesamte Klassenliste in Ihrer Bindungs-XML hart zu codieren? Oder ist es der einzige Weg, eine dynamische Klasse auszulassen und bedingt anzuhängen?

— Drazen Bjelovuk

Wie zu tun, wenn mehr als 2 Klassen

— geändert werden müssen

34

Ja, es ist möglich, eine CSS-Klasse je nach Situation dynamisch zu ändern, jedoch nicht mit th:if. Dies erfolgt mit dem elvis-Operator .

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

— Michiel Bijlsma
quelle

Link kaputt. Noch nie von Elvis gehört. hast du dich geschminkt

— Localhoost

@atilkan: Sie könnten einfach den Elvis-Operator googeln und sehen, dass es sich um eine Variante des ternären Operators handelt. Sogar Wikipedia erklärt es in den ersten Zeilen: en.wikipedia.org/wiki/Elvis_operator

— Kenny

6

Zu diesem Zweck und wenn ich keine boolesche Variable habe, verwende ich Folgendes:

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

— Fleky
quelle

5

Eine andere sehr ähnliche Antwort ist die Verwendung von "gleich" anstelle von "enthält".

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

— zündete
quelle

4

Wenn Sie im Fehlerfall nur eine Klasse anhängen möchten, können th:errorclass="my-error-class"Sie die im Dokument erwähnte verwenden .

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

Auf ein Formularfeld-Tag angewendet (Eingabe, Auswahl, Textbereich…) wird der Name des zu untersuchenden Felds aus einem vorhandenen Namen oder den Feldattributen th: im selben Tag gelesen und anschließend die angegebene CSS-Klasse an das Tag angehängt wenn einem solchen Feld Fehler zugeordnet sind

— Stephane L.
quelle

2

Noch eine andere Verwendung der Klasse th:, wie sie @NewbLeech und @Charles veröffentlicht haben, jedoch auf das Maximum vereinfacht, wenn es keinen "else" -Fall gibt:

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

Enthält kein Klassenattribut, wenn # fields.hasErrors ('password') false ist.

— Adrian Adamczyk
quelle

1

Nur um meine eigene Meinung hinzuzufügen, falls es für jemanden nützlich sein könnte. Das habe ich benutzt.

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

— Charles
quelle

1

Was @Nilsi erwähnte, ist vollkommen richtig. Adminclass und User Class müssen jedoch in einfache Anführungszeichen gesetzt werden, da dies möglicherweise fehlschlägt, da Thymeleaf nach adminClass- oder Userclass-Variablen sucht, die Zeichenfolgen sein sollten. Das gesagt,

es sollte sein: -

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

oder nur:

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

— N Djel Okoye
quelle

0

Wenn Sie eine Klasse entsprechend hinzufügen oder entfernen möchten, ob die URL bestimmte Parameter enthält oder nicht. Dies können Sie tun

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

Wenn die URL 'home' enthält, wird eine aktive Klasse hinzugefügt und umgekehrt.

— Shubh
quelle