This is kind of a weird question, but is there a way to add CSS styling to a button such that I could one time say “10% is red, 90% is blue”, the next time say “20% red, 80% blue”, and so on. I know how to do it directly in CSS, something similar to this:
.v-button-20red {
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red 0%, red 20%, blue 20%, blue 100%); /* Standard syntax (must be last) */
}
and then just add the “20red” style to my button, as in button.addStyleName("20red"); But I really don’t want to have to add 100 styles, or even 10 styles ( one for each 10% ). Ideally I would like to set “linear-gradient” directly. I think this is possible in Flow, but I am still using Vaadin 7, and can find no way to directly set the CSS for a given component. Am I forgetting some trick? Or does someone else have a better idea?
I don’t like how ProgressBar looks in my use case (I think it visually conflicts with the other buttons on the screen), so was hoping to do something like the above with Buttons.
I wonder if you are ultimately interested in the animation effect? If so, it can be done by describing some frames in sass - in your case gradient variants, then applying a timer to them. I have done something similar to make the cell in a grid gently “throb” to get the user’s attention without using harsh visual techniques. Perhaps the same idea could be used to simulate a progress bar. In my case, the animation:
… is referenced from css that defines the grid’s cell like this …
animation: throb 1s linear infinite;
I am varying the opacity of a darker gradient over top of a lighter one, so the visual effect is a gentle pulsing of lightness/darkness of the gradient in the grid cell.
It is not so much that I want an animation, I literally want two colors. So one time, based on DB values, I will want 20% red and 80% blue. Another time, for different DB values, I will ant 10% red, and 90% blue, and so on. It is very dynamic. My example CSS does exactly what I want. The only thing I don’t know how to do in Vaadin is how to change the CSS dynamically based on business logic, except adding 10-100 different CSS classes.
In Flow, I could swear there was a way to set it actual CSS via the component, directly, but I cannot find it right now. Would not work for Vaadin 7 anyway, so sort of a mute point.
Obviously, I could use the CssInject add-on to make things more dynamic, but in this case it would probably be more efficient and easier to code to just code 1-100 CSS classes.