Tab Strip Label Template

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 16 Jul 2022 08:47 by ADMIN

Release 2.21.0

nonick

Created on: 22 Jul 2019 13:28

Category: TabStrip

Type: Feature Request

Tab Strip Label Template

I would like there to be a template for tab strip label so that i could put anything i want in there rather than just text.

Duplicated Items

3 comments

ADMIN

Marin Bratanov

Posted on: 16 Jul 2022 08:47

Hi Rick,

What you would normally see in the feedback portal is some workaround. When a feature/fix becomes official, this type of workaround is likely not needed anymore. With fixes, likely you will see no changes, simply "it will work", but with features, you can find information in the documentation. For example, in this case, the label template in the tabstrip is documented here: https://docs.telerik.com/blazor-ui/components/tabstrip/header-template.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Rick

Posted on: 13 Jul 2022 16:04

Are you expecting to have a supported solution? This is a very old feature request that has been flagged as completed but noted that it is simply a non-supported hack.

ADMIN

Marin Bratanov

Posted on: 01 May 2020 14:15

This item is gaining some traction and while it is not planned yet, something like this can be kind of a workaround (note: it's hacky, causes invalid HTML and will require tweaks, but it may suffice for a couple of simple tasks even though it is not an officially supported solution):

@* Note: This is a HACKY workaround that results in invalid HTML and we can't be sure it won't cause issues *@

<TelerikTabStrip>
    <TabStripTab Title="Sofia">
        sofia content
    </TabStripTab>
    <TabStripTab Title="London">
        london content
    </TabStripTab>
    <li class="k-item my-custom-tab">
        <TabStripTab Title="Lorem ipsum">
            lorem ipsum dolor sit amet
        </TabStripTab>
        <span class="my-badge">9</span>
    </li>
</TelerikTabStrip>

<style>
    .my-custom-tab li.k-item[role=tab] {
        padding-right: 2em;
    }
    .my-custom-tab .my-badge {
        position: absolute;
        right: 10px;
        top: 5px;
        z-index: 2;
        border-radius: 50%;
        background: red;
        color: white;
        width: 1.5em;
        height: 1.5em;
        display: inline-block;
        text-align: center;
        vertical-align: baseline;
        font-weight: bold;
    }
</style>

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.