TabItems outside Tab control

[HappyCamper]

Is it possible to have the tabitems collection outside of the tab control?  The use case is to have the tab items at the top of a page (in a "header" div), and the tabitems in a div that's in a different area of the page.  (div using 4 columns)  I was trying to use two tab controls, first one (in the header) bound to a variable (selectedTab).  and a second tab control using the same.  this would let you set the tab selected with its headers in the first one, and then switch the tab item in the second.  however I can't find a way to hide the header of the second tab (Is it possible to hide the actual tab headers?)

[Satheesh Kumar Balasubramanian]

Hi Happy, 

  

Greetings from Syncfusion Support..! 

  

We have validated your reported query at our end and suspect that you need to show and hide tab items dynamically. We have prepared a sample for your reference, which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/160608/ze/TabComponent-1164114131 

 

 

Code snippet:  

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Buttons

<SfTab>

    <TabItems>

        <TabItem>

            <HeaderTemplate>

                <SfButton IsToggle="true"

                          Content="@item.ButtonText"

                          @onclick="ShowHideItem">

                </SfButton>

            </HeaderTemplate>

            <ContentTemplate>

                <div>Tab Content 1</div>

            </ContentTemplate>

        </TabItem>

        <TabItem Visible="@hideSecondItem">

            <HeaderTemplate>

                <div>Tab Header 2</div>

            </HeaderTemplate>

            <ContentTemplate>

                <div>Tab Content 2</div>

            </ContentTemplate>

        </TabItem>

        <TabItem Visible="@hideThirdItem">

            <HeaderTemplate>

                <div>Tab Header 3</div>

            </HeaderTemplate>

            <ContentTemplate>

                <div>Tab Content 3</div>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

@code{

    bool hideSecondItem = false;

    bool hideThirdItem = true;

    public class ItemViewModel

    {

        public int Id { get; set; }

        public bool IsSelected { get; set; }

        public string ButtonText => IsSelected ? "HIDE SECOND ITEM" : "SHOW SECOND ITEM";

    }

    ItemViewModel item = new ItemViewModel { Id = 1 };

    protected void ShowHideItem()

    {

        item.IsSelected = !item.IsSelected;

        hideSecondItem = !hideSecondItem;

        hideThirdItem = !hideThirdItem;

    }

}

 

 If we misunderstood your requirement, please share more details about your requirement. 

Regards, 

Satheesh Kumar B