Skip to content

Instantly share code, notes, and snippets.

@SteveSandersonMS
Created November 15, 2018 11:33
Show Gist options
  • Save SteveSandersonMS/f10a552e1761ff759b1631d81a4428c3 to your computer and use it in GitHub Desktop.
Save SteveSandersonMS/f10a552e1761ff759b1631d81a4428c3 to your computer and use it in GitHub Desktop.
Blazor tab example
@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;
}
using Microsoft.AspNetCore.Blazor;
public interface ITab
{
RenderFragment ChildContent { get; }
}
@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);
}
}
.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;
}
<!-- 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();
}
}
}
@Netsurfer2
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment