Class?

[Jonathan]

How do you apply a class - text formatting to the tabstrip?

 

thx again

[Marin Bratanov]

Hi Jonathan,

For the time being, you need a div around the tab strip through whose class you can cascade.

You can Follow the implementation of Class parameters in the component here: https://feedback.telerik.com/blazor/1450831-css-class-for-the-tab-header-and-for-the-entire-tab-strip

You may also want to Follow this one: https://feedback.telerik.com/blazor/1433654-component-specific-css-classes-and-ability-to-set-classes-per-instance

I've added your Vote to both to raise their priority.

Regards,
Marin Bratanov
Progress Telerik

[Jonathan]

thx again.. will try

[Jonathan]

Can you provide an example ?  you need a div around the tab strip through whose class you can cascade.

Something like this?

 

<style>

    .title {
        font-size: 24px;
        color: #1861ac;
    }
</style>

<div class="title">

       
        <TelerikTabStrip TabPosition=@tabPosition>

            <TabStripTab Title="Dashboard">

[Marin Bratanov]

Hello Jonathan,

You'd have to add some more specific rules after that in order to override built-in rules. The following blog post can help you inspect the HTML rendering and the applied CSS rules so you can devise your own (see the first two sections mostly): https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools

Here's an example I made for your with that approach that shows how you can target the tab titles and also the tab content:

<style>
    .title li .k-link {
        font-size: 24px;
        color: #1861ac;
    }

    .title div.k-content {
        font-size: 48px;
        color: red;
    }
</style>

<div class="title">
    <TelerikTabStrip>
        <TabStripTab Title="First">
            First tab content.
        </TabStripTab>
        <TabStripTab Title="Second" Disabled="true">
            Second tab content. This tab is disabled and you cannot select it.
        </TabStripTab>
        <TabStripTab Title="Third">
            Third tab content.
        </TabStripTab>
    </TelerikTabStrip>
</div>

 

Regards,
Marin Bratanov
Progress Telerik

[Jonathan]

thx again!