Change label color Bootstrap

Asked

Viewed 316 times

2

How do I change the label color of my button depending on the value it has?

On my form, in the field status, I need that when the value is in "open", green, when "finished" is in blue, and when "canceled" in red.

I made a function using Thymeleaf but it is not correct yet.

Resultado visual da função

I got the result doing so: 

<span class="badge badge-success"
      th:text="${f.status.descricao}"
      th:classappend="${#strings.toString(f.status) == 'ABERTO' ? 'label-success' : 'badge-danger'}">
</span>

This way it is green when it is in open status, but the other values (canceled, completed) are applied by the red color, referring to the class badge-danger, because I don’t know how to evaluate the other two options within the function.

bootstrap-4 thymeleaf

  • I think this site will raise the question.... https://www.w3schools.com/bootstrap4/bootstrap_colors.asp

  • This served as a glove for me hermit! Thank you very much, I started messing with Thymeleaf and bootstrap a little while ago, so I got lost with the condition. But that’s exactly what I needed!!

1 answer

0

You can include another ternary in parentheses after the : of the current ternary.

Instead of:

th:classappend="${#strings.toString(f.status) == 'ABERTO' ? 'label-success' : 'badge-danger'}"

Will stay:

th:classappend="${#strings.toString(f.status) == 'ABERTO' ?
'label-success' :
(#strings.toString(f.status) == 'CONCLUIDO' ? 'label-concluido' : 'badge-danger')}"

The class label-concluido is just an example. Put the class you want to refers to the state "COMPLETED".

Browser other questions tagged bootstrap-4 thymeleaf

You are not signed in. Login or sign up in order to post.