RadzenSelectBar Color Attribute

[RobertRo]

Hello!

my team asks me to design something like this:

this is how it currently looks:

adding colors would provide better visual feedback in our UI. i have tried all sorts of style="...." variations on the RadzenSelectBarItem code but nothing works. is there some easy trick to get this done or could you add a foreground and background(selected state) color attribute, which i can pass html colors to? #FF0000 and so on.

thanks!

[enchev]

Hi @RobertRo,

Here is what worked for me:

[RobertRo]

thank you, it works like you described. i may have done something wrong the last time i tried.

but what i want to do is color the button only when it is "selected", otherwise it should be default color. can this be done?

[enchev]

In this case you can define custom CSS:

[RobertRo]

but that colors all buttons red. how to distinguish between pass and fail button in CSS? for example, pass should be green, and fail should be red, in their active state, and default color in non-active state.

[korchev]

You can use the nth-child or nth-of-type CSS selector to target a specific button.

[RobertRo]

perfect, that was the missing part! thanks!

for reference, here the complete code. i added a class to the selectbar so i can distinguish in the css between different selectbars as well.

<RadzenSelectBar TValue="int" @bind-Value="@taskdata.mitigatedValueBridge"
    Change="@((args) => TaskResultChanged(taskdata, args, "Mitigated"))"
    @onclick:stopPropagation="true" class="sbar-checktask-result">
    <Items>
        <RadzenSelectBarItem Text="NONE" Value="0" />
        <RadzenSelectBarItem Text="FAIL" Value="1" />
        <RadzenSelectBarItem Text="PASS" Value="2" />
    </Items>
</RadzenSelectBar>


/* select bar coloring */
.sbar-checktask-result .ui-button.ui-state-active:nth-child(3) {
    background-color: forestgreen;
}
.sbar-checktask-result .ui-button.ui-state-active:nth-child(2) {
    background-color: red;
}