Is it Possible to have a Badge in the Tab Header

[Simon Arnold]

What I am after is to display a Badge with a count of items on the Tab Header, is this possible within the <TabHeader> tag?

[Vijay Ravi]

Hi Simon,

You can achieve your requirement with help of the HeaderTemplate property of the TabItem as shown in the below code snippet.

UG: https://blazor.syncfusion.com/documentation/tabs/how-to/customize-selected-tab-styles

[Index.Razor]

<SfTab CssClass="notification-tab">

    <TabItems>

        <TabItem>

            <HeaderTemplate>

                <div class="e-title fade-in">Whatsapp</div>

                <span class="e-badge e-badge-info e-badge-notification e-badge-overlap">@badgeCount</span>

            </HeaderTemplate>

            <ContentTemplate>

                <Counter OnCountChanged="UpdateBadgeCount" />

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

 

<style>

    .notification-tab.e-tab .e-tab-header .e-tab-wrap .tab-header-container {

        position: relative;

        width: 110%;

    }

</style>

Regards,

Vijay Ravi

Attachment: tab_with_badge_9e0c22a1.zip