Does it possible to manipulate colors of RadzenSteps component

Radzen.Blazor Components
1

Hello,

I started using Radzensteps component and I wanted to changed color of "RadzenStepsItem" but I couldn't do it.
I have tried add "Style" parameter and override color style but it doesn't help. So is it possible to set color on this element?

Sorry if I miss some information about it but I couldn't find anything there.

2

Hi @Arek_Zaluska,

You can modify the appearance of the item via CSS variables. Add this to your styles:

:root {
    --rz-steps-number-color: white;
    --rz-steps-number-background-color: black;
    --rz-steps-number-selected-color: white;
    --rz-steps-number-selected-background: red;
}

You can use the browser's devtools to inspect the element and see what other CSS variables are applied, in case you need to further modify it.

3

Thank you so much for your response :smiling_face:.

is there a way to change these styles dynamically, e.g. if a variable changes, use different styles

4

Yes, you can set them via the Style attribute. Something like this:

<RadzenSteps 
   Style="@($"--rz-steps-number-color: {(condition ? : "red" : "green" )}")">
1 Like
5

Thank you, it's works! :smiling_face:

But I have one last question, I promise :sweat_smile:. How I can set with and height these elements that showing index of steps to follow. I've tried set "width and height" in style attribute but it's not work :face_with_diagonal_mouth:

6

I am not sure which elements you are referring to.

7

I had on mind this element, sorry for not specifying my previous request.

Screenshot_20231112-000117~2
Screenshot_20231112-000117~21080×304 14.5 KB

8

Right-click the desired element in your browser and pick "Inspect". This will show all CSS rules applying to it and any CSS variables involved.

image
image2938×828 338 KB