Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 08 Dec 2020 09:26 by ADMIN
Release 2.21.0
Eugenie
Created on: 25 Jan 2020 09:35
Category: TabStrip
Type: Feature Request
24
Css Class for the tab header and for the entire tab strip

I want to style my tab headers with something similar to this, but it does not compile:

 

 <h2>Telerik Tab Strip</h2>
    <TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top">
        <TabStripTab Class="WeirdTab" Title="First">
            First tab content.
        </TabStripTab>
        <TabStripTab Title="Second">
            Second tab content.
        </TabStripTab>
        <TabStripTab Title="Third">
            Third tab content.
        </TabStripTab>
    </TelerikTabStrip>
    <style>
        .WeirdTab {
            color: red;
        }
    </style>

 

While I can style the content of the tabs in the tabs themlselves (see below) I'd like to be able to style the headers too

<h2>Telerik Tab Strip</h2>
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top">
    <TabStripTab Title="First">
        <div class="WeirdTab">
            First tab content.
        </div>
    </TabStripTab>
    <TabStripTab Title="Second">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>
<style>
    .WeirdTab {
        color: red;
    }
</style>

4 comments
Giuseppe
Posted on: 24 Jul 2020 11:39
The possibility to extend a class (or other atrributes, add custom attributes) should be a feature that should affect all Blazor Controls.
ADMIN
Marin Bratanov
Posted on: 26 Feb 2020 10:00

Hi Eugenie,

The initial post I made on your behalf shows a workaround for a class for the tabs content. A workaround for the tabs headers is not available, I'm afraid, as they don't have label/header templates yet, and a workaround for the entire tab strip could be wrapping it in a <div> element and setting a custom class to that div.

On an ETA - I cannot say for certain at this point, and clicking the Follow button at the top is the best way to get notified for updates.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Eugenie
Posted on: 25 Feb 2020 20:09

Marin, 

Yes, that is true -- I think the title of my post mentioned "entire tab strip" but I didn't give an example. 

Is there a workaround for this, or an ETA for a fix?

Thank you, 
Eugenie

ADMIN
Marin Bratanov
Posted on: 21 Feb 2020 08:37

To add to this, a Class for the entire TabStrip would be a good addition so that you could target specific instances.

--Marin

Create an account Log In
View
Type
Status
Category