We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customize the tab items seperately

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 !

3 Replies

RM Ruksar Moosa Sait Syncfusion Team October 11, 2022 04:12 AM

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


AM Amanda replied to Ruksar Moosa Sait October 19, 2022 07:13 AM

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!



VD Vinitha Devi Murugan Syncfusion Team October 20, 2022 08:52 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon