Al usar Thymeleaf como motor de plantilla, ¿es posible agregar / eliminar dinámicamente una clase CSS a / desde un simple div
con la th:if
cláusula?
Normalmente, podría usar la cláusula condicional de la siguiente manera:
<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a>
Crearemos un enlace a la página de lorem ipsum , pero solo si la cláusula de condición es verdadera.
Busco algo diferente: me gustaría que el bloque esté siempre visible, pero con clases cambiables según la situación.
Respuestas:
También hay
th:classappend
.Si
isAdmin
es asítrue
, esto resultará en:fuente
th:class
reemplaza / reescribe tu atributo de clase.th:classappend
es lo que quieres.th:classappend="${theRightClass}"
th:classappend
atributos. Se permite un máximo de uno.Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".
th:classremove
puede eliminar una sola clase sin afectar a las demás o sin codificar una lista de clases completa en su xml vinculante? ¿O es dejar de lado cualquier clase dinámica y agregar condicionalmente el único camino a seguir?Sí, es posible cambiar una clase CSS dinámicamente según la situación, pero no con
th:if
. Esto se hace con el operador elvis .fuente
Para este propósito y si no tengo una variable booleana, uso lo siguiente:
fuente
Otra respuesta muy similar es usar "es igual a" en lugar de "contiene".
fuente
Si solo desea agregar una clase en caso de error, puede usar
th:errorclass="my-error-class"
mencionado en el documento .fuente
Solo para agregar mi propia opinión, en caso de que pueda ser útil para alguien. Esto es lo que usé.
fuente
Otro uso más de th: class, igual que @NewbLeech y @Charles han publicado, pero simplificado al máximo si no hay un caso "else":
No incluye el atributo de clase si # fields.hasErrors ('contraseña') es falso.
fuente
Lo que mencionó @Nilsi es perfectamente correcto. Sin embargo, adminclass y user class deben estar entre comillas simples, ya que esto podría fallar debido a que Thymeleaf busca las variables adminClass o userclass que deberían ser cadenas. Dicho eso
debería ser: -
o solo:
fuente
Si está buscando agregar o eliminar una clase en consecuencia, si la URL contiene ciertos parámetros o no, esto es lo que puede hacer
Si la URL contiene 'casa', se agregará la clase activa y viceversa.
fuente
En caso de que alguien esté usando Bootstrap, pude agregar más de una clase:
fuente