Customize the tab items seperately

[Amanda]

Hello,

I am using the SfTab component at my blazor project and I want to ask two questions.

1. How can I add an ID to each TabItem of the component so that I can change its style seperately?
   
2. Can I add custom icons at the tab header of each TabItem and how?
   
   
   

Thanks in advance !

[Ruksar Moosa Sait]

Hi Amanda,

Q1.How can I add an ID to each TabItem of the component so that I can change its style separately?

You can add the ID property and set its value in string in the TabItem tag like the below code snippet.

Q2.Can I add custom icons at the tab header of each TabItem and how?

Yes, you can add the custom icons at the tab header using the IconCss property. In the below example, we have used the font awesome icon with the Tab header.

[_Host.cshtml]

<link rel="stylesheet" rel='nofollow' href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css />

[Index.razor]

<TabItem ID="Tab1" Content="Twitter is an online social networking service that enables users to send and read short 140-charactermessages called tweets. Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.">           

        <ChildContent>

                <TabHeader Text="Twitter" IconCss="fa fa-twitter"></TabHeader>

            </ChildContent>

</TabItem>

Output:

Regards,

Ruksar Moosa Sait

Attachment: BlazorTabCustomIcon_2e929018.zip

[Amanda]

Hello again,

Thanks for response. I would like to ask if there is a nuget package that I can install at my project or how can I get the css file in order to ensure that these icons will be visible when my page is offline.

Thanks!

[Vinitha Devi Murugan]

Hi Amanda,

Thanks for your update.

We suggest you to refer below common reference link to achieve your requirement.

https://stackoverflow.com/questions/49550011/font-awesome-icons-in-offline

Regards,

Vinitha