Blazor tab example

Index.cshtml

@page "/"

<TabSet>
    <Tab Title="First tab">
        <h4>First tab</h4>
        This is the first tab.
    </Tab>

    @if (showSecondTab)
    {
        <Tab Title="Second">
            <h4>Second tab</h4>
            You can toggle me.
        </Tab>
    }

    <Tab Title="Third">
        <h4>Third tab</h4>

        <label>
            <input type="checkbox" bind=@showSecondTab />
            Toggle second tab
        </label>
    </Tab>
</TabSet>

@functions
{
    bool showSecondTab;
}

ITab.cs

using Microsoft.AspNetCore.Blazor;

public interface ITab
{
    RenderFragment ChildContent { get; }
}

Tab.cshtml

@implements IDisposable
@implements ITab

<li>
    <a onclick=@Activate class="nav-link @TitleCssClass" href="">
        @Title
    </a>
</li>

@functions {
    [CascadingParameter] TabSet ContainerTabSet { get; set; }
    [Parameter] string Title { get; set; }
    [Parameter] public RenderFragment ChildContent { get; private set; }

    string TitleCssClass => ContainerTabSet.ActiveTab == this ? "active" : null;

    protected override void OnInit()
    {
        ContainerTabSet.AddTab(this);
    }

    public void Dispose()
    {
        ContainerTabSet.RemoveTab(this);
    }

    void Activate()
    {
        ContainerTabSet.SetActivateTab(this);
    }
}

tabs.css

.nav-tabs .nav-link {
  border-color: #dee2e6 #dee2e6 #fff;
  border-bottom-color: #dee2e6;
  background-color: #f9f9f9;
}

.nav-tabs .active {
  border-top: 4px solid #e0108b !important;
  padding-top: 5px;
  border-bottom: 1px solid transparent;
  background-color: white;
}

.nav-tabs > li {
  margin-bottom: -1px;
}

.nav-tabs-body {
  border: 1px solid #dee2e6;
  border-top-width: 0;
}

TabSet.cshtml

<!-- Display the tab headers -->
<CascadingValue Value=this>
    <ul class="nav nav-tabs">
        @ChildContent
    </ul>
</CascadingValue>

<!-- Display body for only the active tab -->
<div class="nav-tabs-body p-4">
    @ActiveTab?.ChildContent
</div>

@functions {
    [Parameter] RenderFragment ChildContent { get; set; }

    public ITab ActiveTab { get; private set; }

    public void AddTab(ITab tab)
    {
        if (ActiveTab == null)
        {
            SetActivateTab(tab);
        }
    }

    public void RemoveTab(ITab tab)
    {
        if (ActiveTab == tab)
        {
            SetActivateTab(null);
        }
    }

    public void SetActivateTab(ITab tab)
    {
        if (ActiveTab != tab)
        {
            ActiveTab = tab;
            StateHasChanged();
        }
    }
}

I was thinking... can you use AJAX or J-Query in a Blazor Page?... AJAX has a tabbed control.