Radzen tab and selected underlying color

Radzen.Blazor Components
1

Hi,

i m using RadzenTabs and i want to know how to remove the underlying color for the selected tab?

image
image494×237 5.78 KB

thank you for your help

2

Hello @Tia,

You can use the Appearance panel in Radzen Blazor Studio to edit the theme:

image
image1288×1992 263 KB

This edit adds the following styles to your site.css:

:root {
    --rz-tabs-tab-selected-top-border-color: var(--rz-tabs-background-color);
}

This basically makes the top border color inherit the base tabs background-color using CSS variables. This way changing the base background color on a later stage will change the border color as well.

If you don't want to add such styling dependencies, simply set a white color (the same as Background color's value):

image
image1280×1980 249 KB

resulting in the following change in site.css:

:root {
    --rz-tabs-tab-selected-top-border-color: #ffffff;
}
3

Is there a simple option for doing a selected bottom border instead of top in the standard theme?

image
image927×145 7.27 KB

4

Hi @benghaner,

There isn't a straightforward option, however you can add CSS overrides to adjust the theme or use another theme.

Here are some styles to start with:

.rz-tabview-top > .rz-tabview-nav li {
    border-top-width: 0;
    border-bottom-width: 2px;
    border-bottom-color: var(--rz-tabs-tab-background-color);
}

.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-bottom-color: var(--rz-tabs-tab-selected-top-border-color);
}

You can use the browser's devtools to inspect and see which styles you'd need to further override e.g. on hover etc.