Completed
Last Updated: 27 Nov 2020 13:50 by ADMIN
Release 2.21.0
nonick
Created on: 22 Jul 2019 13:28
Category: TabStrip
Type: Feature Request
32
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.
1 comment
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.