RadzenTabsItem Styling Title

Radzen.Blazor Components
1

Hi There,

I was wondering if there is a way to change the color of a tab's title based on a variable. In my case, I want to have tabs be different colors based on the setting of a status variable (Not Started, In Progress, etc.). Is there a way to programmatically change the color or style? I tried setting the Style attribute of the RadzenTabsItems, but that did not seem to work. I also found the .rz-tabview-title class through inspecting the tabs, but I cannot seem to access the class programmatically (like one can change colors in the radzengrid through methods, etc.).

Is there a way to do this?

Thanks in advance for any help you can provide.

2

You can set the Style attribute like this:

 <RadzenTabsItem Text="Employee" 
   style=@($"--rz-tabs-tab-color: {(condition ? "red" : "inherit")}; --rz-tabs-tab-selected-color:  {(condition ? "red" : "inherit")}")>

This will change the text color of a particular tab to red when the condition boolean variable is true. It does so by setting the --rz-tabs-tab-color and --rz-tabs-tab-selected-color CSS variables that control the color of tab text in normal and selected state.

3

Much appreciated for the quick response!