SfTabs Hide Tab

[Hamdi Boyaci]

Hi

Is there any way or sample Hide Tab ?

Thanks

HB

[Praveenkumar Narasimhanaidu]

Hi Hamdi, 

Greetings from Syncfusion support! 

Yes, we can achieve your requirement “Hiding Tabs” by using Visible property. We have prepared a sample based on your requirement which can be downloaded from the following link. In the following sample, you can show/hide the tab item by clicking the “Show/Hide” button. 

https://www.syncfusion.com/downloads/support/forum/159259/ze/HideTab1818897457 

@using Syncfusion.Blazor.Navigations 

 

<button @onclick="OnButtonClick">Show/Hidebutton> 

 

<SfTab> 

    <TabItems> 

        <TabItem Visible="@IsVisible" 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 readthem.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in SanFrancisco 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 billionsearch queries per day."> 

            <ChildContent> 

                <TabHeader Text="Twitter">TabHeader> 

            ChildContent> 

        TabItem> 

        <TabItem Content="Facebook is an online social networking service headquartered in Menlo Park, California. Its website waslaunched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students EduardoSaverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes."> 

            <ChildContent> 

                <TabHeader Text="Facebook">TabHeader> 

            ChildContent> 

        TabItem> 

        <TabItem Content="WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operatesunder a subscription business model.It uses the Internet to send text messages, images, video, user location andaudio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a userbase of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based inMountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion."> 

            <ChildContent> 

                <TabHeader Text="Whatsapp">TabHeader> 

            ChildContent> 

        TabItem> 

    TabItems> 

SfTab> 

 

@code { 

    bool IsVisible = false; 

    private void OnButtonClick() 

    { 

        IsVisible = !IsVisible; 

    } 

} 

Kindly get back to us, if you need any further assistance.

 

Regards, 

Praveenkumar. 

[Hamdi Boyaci]

Thanks for your reply.

Also there is a misunderstanding.

I can hide/show tab like your code, but I want to hide Tab's Header/Caption section. (manage form element is tab like wizard but with not any header/caption)

Is it possible ?

Thanks

HB

[Satheesh Kumar Balasubramanian]

Hi Hamdi, 

  

Thanks for your update. 

  

We have validated your reported query "I want to hide Tab's Header/Caption section" and achieved your requirement by customizing the toolbar item styles based on the Tabs "CssClass" property. 

  

Code snippet:  

<SfTab @ref="Tab" CssClass="BlazorTab" Height="390" LoadOn="ContentLoad.Demand"> 

....... 

....... 

....... 

</SfTab> 

  

<style> 

    .wizard-title { 

        font-size: 15px; 

        padding: 7px; 

    } 

  

    .responsive-align { 

        width: 75%; 

        margin: 0 auto; 

    } 

  

    .error { 

        color: red; 

    } 

  

    .search-item { 

        padding-right: 50px; 

        padding-bottom: 20px; 

    } 

  

    .btn-container { 

        padding-bottom: 15px; 

    } 

  

    #amount { 

        text-align: right; 

        font-size: 15px; 

        padding: 15px 0px; 

    } 

  

    #passenger-table th { 

        text-align: center; 

        font-size: 14px; 

        font-weight: 400; 

        border: 1px solid gainsboro; 

    } 

  

    #passenger-table td, th { 

        padding: 10px; 

    } 

  

    #passenger-table td { 

        border: 1px solid gainsboro; 

    } 

  

    .e-tab.BlazorTab .e-tab-header .e-toolbar-items .e-toolbar-item.e-template { 

        display: none !important; 

    } 

  

    .e-tab.BlazorTab .e-tab-header:not(.e-vertical)::before { 

        border-bottom-width: 0px !important; 

    } 

</style> 

  

Sample: https://www.syncfusion.com/downloads/support/forum/159259/ze/HideTab2040434247 

  

Kindly try the above sample and get back to us if you need further assistance. 

  

Regards, 

Satheesh Kumar B 

[Mike-E]

Thank you for highlighting the important parts in yellow, and for all your great support here.  I was running into the same issue and this is what I was looking for. 👍

[Satheesh Kumar Balasubramanian]

Hi Mike,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B

[Maria]

Hi, 

I have the exact requirement in my application but the above mentioned workaround does not work for me.

Regards,

Maria

[Ravikumar Venkatesan]

Hi Maria,

Greetings from Syncfusionn support.

We have validated your query “I have the exact requirement in my application but the above mentioned workaround does not work for me” at our end. We need additional details to validate and provide the solution for your query. Can you kindly share the below details it will help us to provide the solution for your requirement earlier?

• Share the exact requirement details.
• Share the details of the problem you facing with our last provided solution.
• Share any details which will help us to understand your exact requirement like images, videos, etc.

Regards,

Ravikumar Venkatesan