Używając Thymeleaf jako silnika szablonów, czy można dynamicznie dodawać / usuwać klasę CSS do / z prostego divz th:ifklauzulą?
Zwykle mógłbym użyć klauzuli warunkowej w następujący sposób:
<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a> Będziemy tworzyć łącze do strony lorem ipsum , ale tylko wtedy, gdy klauzula warunku jest prawdziwa.
Szukam czegoś innego: chciałbym, żeby klocek był zawsze widoczny, ale ze zmiennymi klasami w zależności od sytuacji.
Odpowiedzi:
Jest też th:classappend.
<a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"></a>Jeśli isAdmintak true, to spowoduje:
<a href="" class="baseclass adminclass"></a>th:classzastępuje / przepisuje atrybut klasy. th:classappendjest tym, czego chcesz.
th:classappend="${theRightClass}"
th:classappendatrybutów. Maksymalnie jeden jest dozwolony. Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
th:classremovekonieczności usuwania pojedynczej klasy bez wpływania na inne lub sztywnego kodowania całej listy klas w wiążącym pliku XML? A może jedyną drogą jest pozostawienie jakiejkolwiek dynamicznej klasy wyłączonej i warunkowe dołączenie?
Tak, można dynamicznie zmieniać klasę CSS w zależności od sytuacji, ale nie za pomocą th:if. Odbywa się to za pomocą operatora elvis .
<a href="lorem-ipsum.html" th:class="${isAdmin}? adminclass : userclass">Lorem Ipsum</a> Inną bardzo podobną odpowiedzią jest użycie „równa się” zamiast „zawiera”.
<li th:class="${#strings.equals(pageTitle,'How It Works')} ? active : ''">Jeśli chcesz tylko dołączyć klasę w przypadku błędu, możesz użyć th:errorclass="my-error-class"wspomnianego w dokumencie .
<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />Zastosowany do tagu pola formularza (input, select, textarea…), odczyta nazwę pola do zbadania z dowolnej istniejącej nazwy lub atrybutu th: field w tym samym tagu, a następnie doda określoną klasę CSS do tagu jeśli z takim polem są powiązane błędy
Jeszcze inne użycie th: class, tak samo jak @NewbLeech i @Charles, ale uproszczone do maksimum, jeśli nie ma przypadku „innego”:
<input th:class="${#fields.hasErrors('password')} ? formFieldHasError" />Nie obejmuje atrybutu klasy, jeśli # fields.hasErrors ('password') ma wartość false.
To, o czym wspomniał @Nilsi, jest całkowicie poprawne. Jednak klasa adminclass i klasa użytkownika muszą być opakowane w pojedyncze cudzysłowy, ponieważ może to się nie powieść, ponieważ Thymeleaf szuka zmiennych adminClass lub userclass, które powinny być łańcuchami. To mówi,
powinno być: -
<a href="" class="baseclass" th:classappend="${isAdmin} ? 'adminclass' :
'userclass'">
</a>Lub tylko:
<a href="" th:class="${isAdmin} ? 'newclass' :
'baseclass'">
</a>Jeśli chcesz odpowiednio dodać lub usunąć klasę, jeśli adres URL zawiera określone parametry lub nie. Oto, co możesz zrobić
<a th:href="@{/admin/home}" th:class="${#httpServletRequest.requestURI.contains('home')} ? 'nav-link active' : 'nav-link'" >Jeśli adres URL zawiera słowo „home”, zostanie dodana aktywna klasa i na odwrót.