Button Color interaction On / Off

Community Usage questions
1

Hi !
I found a way to change color of buttons with filling colorWidget with :

#{
@{this} == 1 ? "blue" : "white"
}

But maybe a more elegant way to do this should to use css ?
I saw a
this code to change the color label but didn't manage to make it works ?!

/* css: toggle button */
:host.on .label {
color: red;
}

/* css: push button */
:host.active .label {
color: red;
}

2

Your first solution is just fine :). The solution you saw is obsolete, there’s no element matching that selector (".label"), you the browser inspector (f12) to see what’s there (hint: “label”, with no dot).

1 Like
3

okok !
so this is working fine for the color label

/* css: toggle button */
:host.on label {
color: red;
}
4

I’m on other problem
In a matrix button I wish to have one color by line
Hope to find the solution by myself (share it in this case) :slight_smile:

5

@jean-emmanuel
I made a 8x4 matrix I wish to have one color by line :
I added this to my props
Is there an more elegant way ?

var colors = ["crimson", "orange", "yellow", "greenyellow"]

if (($ >= 0) && ($ < 8)) props.colorWidget = colors[0]
else if (($ >= 8) && ($ <= 15))  props.colorWidget = colors[1]
else if (($ >= 16) && ($ <= 23)) props.colorWidget = colors[2]
else props.colorWidget = colors[3]
6

Here is a shorter solution:

var row = parseInt($ / numberOfCulumns)
props.colorWidget = colors[row]
7

oh I see
that’s an other level