This is a migrated thread and some comments may be shown as answers.

Class?

5 Answers 70 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Veteran
Jonathan asked on 05 Oct 2020, 03:55 PM

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

 

thx again

5 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 06 Oct 2020, 07:06 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Jonathan
Top achievements
Rank 1
Veteran
answered on 06 Oct 2020, 03:22 PM
thx again.. will try
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 10 Oct 2020, 07:07 PM

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">

0
Accepted
Marin Bratanov
Telerik team
answered on 11 Oct 2020, 07:22 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Jonathan
Top achievements
Rank 1
Veteran
answered on 11 Oct 2020, 01:55 PM
thx again!
Tags
TabStrip
Asked by
Jonathan
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Jonathan
Top achievements
Rank 1
Veteran
Share this question
or