The image in the Tab component

[Sarah]

Hi,

How can I put an image instead of an icon in the Tab component? Like the image below:

[Satheesh Kumar Balasubramanian]

Hi Sarah,

You can use TabItem HeaderTemplate to render image instead of icon in tab header.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabItem.html#Syncfusion_Blazor_Navigations_TabItem_HeaderTemplate

Index.razor: 

<SfTab CssClass="e-tab-custom-class">

    <TabItems>

        <TabItem Content="Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.He is fluent in French and Italian and reads German.He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.">

            <HeaderTemplate>

                <div class="e-avatar e-avatar-xsmall e-avatar-circle michael-image"></div>

                <div class="e-title" style="padding-left:10px">Andrew</div>

            </HeaderTemplate>

        </TabItem>

        <TabItem Content="Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).She was assigned to the London office temporarily from July through November 1992.">

            <HeaderTemplate>

                <div class="e-avatar e-avatar-xsmall e-avatar-circle margaret-image"></div>

                <div class="e-title" style="padding-left:10px">Margaret</div>

            </HeaderTemplate>

        </TabItem>

        <TabItem Content="Janet has a BS degree in chemistry from Boston College (1984).She has also completed a certificate program in food retailing management.Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.">

            <HeaderTemplate>

                <div class="e-avatar e-avatar-xsmall e-avatar-circle janet-image"></div>

                <div class="e-title" style="padding-left:10px">Janet</div>

            </HeaderTemplate>

        </TabItem>

    </TabItems>

</SfTab>

<style>

    .e-tab-custom-class .e-avatar {

        background-repeat: no-repeat;

        background-size: cover;

        background-position: center;

    }

    .e-tab-custom-class .e-avatar.michael-image {

        background-image: url(https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/tabs/michael.png);

    }

    .e-tab-custom-class .e-avatar.margaret-image {

        background-image: url(https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/tabs/margaret.png);

    }

    .e-tab-custom-class .e-avatar.janet-image {

        background-image: url(https://blazor.syncfusion.com/demos/_content/blazor_server_common_net7/images/tabs/janet.png);

    }

</style>

Regards,

Satheesh Kumar B

Attachment: TabImage_26932b36.zip

[Sarah]

Hi Satheesh Kumar Balasubramanian

Thank you for your reply.

I put the images in wwwroot/img but unfortunately it is not displayed. The source code is attached.

Attachment: tab_a33bf097.rar

[Satheesh Kumar Balasubramanian]

Hi Sarah,

You have to give the background image URL like below as shown in the code snippets to display the image.

Index.razor

<style>

    .e-tab-custom-class .e-avatar {

        background-repeat: no-repeat;

        background-size: cover;

        background-position: center;

    }

    .e-tab-custom-class .e-avatar.michael-image {

        background-image: url(/img/img1.png);

    }

    .e-tab-custom-class .e-avatar.margaret-image {

        background-image: url(/img/img2.png);

    }

</style>

Regards,

Satheesh Kumar B

Attachment: tab_249962b6.zip

[Sarah]

Hi Satheesh Kumar Balasubramanian

Thank you for your reply.

I saw your source. The image is not displayed.

[Satheesh Kumar Balasubramanian]

Hi Sarah,

We have checked the shared project in the last update and let you know that images are properly loading from our application end. Also, based on the shared image we suspect that tab styles are not loaded properly in your application end.

https://blazor.syncfusion.com/documentation/tabs/getting-started#add-style-sheet

Regards,

Satheesh Kumar B

[Sarah]

Hi Satheesh Kumar Balasubramanian

The problem has been solved .Thank you for your reply.

[Satheesh Kumar Balasubramanian]

Hi Sarah,

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B

[Sarah]

Hi,

I need buttons that are settings for all tabs. How can I add a button where I specified in the image below?

2-How can I use a checkbox like a button? I checked in the syncfusion checkbox component and didn't see anything like that.

[Ram Raju Elaiyaperumal]

Hi Sarah,

You can render the buttons on the right side end you can render the buttons outside of the tab and then you can position them inside the tab using css property.

We have prepared a sample to illustrate this approach. Please refer to the attached sample for further guidance. If you have any additional questions or need further assistance, feel free to ask.

Regards,

Ram

Attachment: tab_249962b6_906baab7.zip

[Sarah]

Hi  Ram Raju Elaiyaperuma,

Thank you for your reply.

How can I remove the background color of the image and remove the image from the circle mode?

[Swathi Ravi]

Hi Sarah,

You can remove the background color of the image by overriding the default css styles of the e-avatar class, as shown in the below shared snippet.

[index.razor]

<style>

    .e-tab-custom-class .e-avatar {

        background-color: unset;

    }

</style>

And you can remove the image from the circle mode by removing the e-avatar-circle class from the image div. Use only the below highlighted class.

[index.razor]

 <HeaderTemplate>

     <div class="e-avatar e-avatar-xsmall michael-image"></div>

     <div class="e-title" style="padding-left:10px">Andrew</div>

 </HeaderTemplate>

Sample: Attached as a zip file.

Output:

Regards,

Swathi Ravi

Attachment: blazortab_25a63b5c.zip

[Sarah]

Hi Swathi Ravi,

Thank you for your reply. 

[Indhumathy Loganathan]

Hi Sarah,

We hope your reported query has been resolved. Please get back to us if you need any further assistance.

Regards,

Indhumathy L

[Sarah]

Hi,

I use SfTab as follows:

<SfTab CssClass="drag-drop-tab e-tab-custom-class" AllowDragAndDrop="true" >

    <TabItems>

        <TabItem>

            <HeaderTemplate>

            </HeaderTemplate>

            <ContentTemplate>

                <page1 />

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <HeaderTemplate>

            </HeaderTemplate>

            <ContentTemplate>

                <page2 />

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <HeaderTemplate>

            </HeaderTemplate>

            <ContentTemplate>

                <page3/>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

I have a sfGrid, ..  inside each page. I want the data to be read from the database when the user selects the corresponding tab. I used OnInitialized on every page, but I didn't get the result. And sometimes the data is not displayed at all.

When the page containing sftab is loaded, page1 receives the information from the database. When the user clicks on tab2, information from the database will be read on page2. When the user clicks on tab1, the information from the database will be read again on page1.

[Swathi Ravi]

Hi Sarah,

Thank you for reaching out to us with your query.

To prevent repeated backend calls when switching back to a previously selected tab, you can use the "load-on-demand" feature available in the SfTab component. This mode ensures that once the content of a tab is loaded, it is retained in the DOM, avoiding any unnecessary reloads when the user navigates between tabs.

To implement this, you can set the LoadOn property to ContentLoad.Demand. In this mode, only the content of the initially selected tab is loaded, and the content for other tabs is rendered upon selection. Once loaded, the content remains in the DOM, ensuring that it doesn’t trigger further backend calls when revisiting the tab.

For detailed guidance on enabling this feature, you can refer to the following documentation:
https://blazor.syncfusion.com/documentation/tabs/content-render-modes#on-demand-rendering-or-lazy-loading

Please let us know if you need further assistance.

Regards,

Swathi

[Sarah]

Hi Swathi Ravi,

Thank you for your reply.

1- I used ContentLoad.Demand and unfortunately the problem was not solved and onInitialized is executed only once. I will explain the problem again:

 In sftab, when the user clicks on tab1, page1 oninitialized is executed. Next, the user clicks tab2 and page2 oninitialized is executed. So far, everything is correct. Next, if the user clicks tab1 again, oninitialized will no longer be executed on page1, but I want oninitialized to be executed again to read the data from the database again. How should I do this?

2-In the link below, I checked the Resonsive mode section, two modes are considered. How can I implement like the image below?

https://blazor.syncfusion.com/documentation/tabs/responsive-modes

[Swathi Ravi]

Sarah,

 

1: To ensure that the OnInitialized method is triggered each time a tab is clicked, you can consider using the Dynamic Rendering mode. This mode will reload the content of each tab as it is selected, allowing the OnInitialized method to execute each time. For further details, you can refer to the documentation on Content Render Modes in Blazor Tabs Component | Syncfusion

 

<SfTab LoadOn="ContentLoad.Dynamic">

 

 

2: For the multi-row tab layout, you can achieve this by setting the OverflowMode to MultiRow. This will allow the tabs to automatically move to the next row when there is insufficient space to display them on a single row.

 

<SfTab OverflowMode="OverflowMode.MultiRow" Width="500px">

 

 

 

I hope this helps resolve your concerns. Please feel free to reach out if you need any further assistance.