Blazor Tabs
Documentation and examples for how to use Blazor Bootstrap
Tabs
components.
Examples#
<Tabs>
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
<Tab Title="About">
<Content>
<p class="mt-3">This is the placeholder content for the <b>About</b> tab.</p>
</Content>
</Tab>
</Tabs>
Fade effect#
To make tabs fade in, add
EnableFadeEffect="true"
parameter. The first tab pane must also have IsActive="true"
parameter to make the initial content visible.<Tabs EnableFadeEffect="true">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>
Title with Icon#
To customize the tab title, use
TitleTemplate
, as shown in the below example.<Tabs EnableFadeEffect="true">
<Tab IsActive="true">
<TitleTemplate>
<Icon Name="IconName.HouseFill" /> Home
</TitleTemplate>
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab>
<TitleTemplate>
<Icon Name="IconName.PersonFill" /> Profile
</TitleTemplate>
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab>
<TitleTemplate>
<Icon Name="IconName.PhoneFill" /> Contact
</TitleTemplate>
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>
Disable Tab#
Disable specific tabs by adding
Disabled="true"
parameter.<Tabs EnableFadeEffect="true">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Projects" Disabled="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Projects</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>
Pills#
Use
NavStyle="NavStyle.Pills"
parameter to change the tabs to pills.<Tabs EnableFadeEffect="true" NavStyle="NavStyle.Pills">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>
Activate individual tabs#
You can activate individual tabs in several ways. Use predefined methods
ShowFirstTabAsync
, ShowLastTabAsync
, ShowTabByIndexAsync
, and ShowTabByNameAsync
, as shown below.<Tabs @ref="tabs" EnableFadeEffect="true">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
<Tab Title="Products" Name="Products">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Products</b> tab.</p>
</Content>
</Tab>
<Tab Title="FAQs" Name="FAQ">
<Content>
<p class="mt-3">This is the placeholder content for the <b>FAQs</b> tab.</p>
</Content>
</Tab>
<Tab Title="About">
<Content>
<p class="mt-3">This is the placeholder content for the <b>About</b> tab.</p>
</Content>
</Tab>
</Tabs>
<Button Color="ButtonColor.Primary" @onclick="ShowFirstTabAsync">First Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowSecondTabAsync">Second Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowThirdTabAsync">Third Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowProductsTabAsync">Products Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowFaqsAsync">FAQs Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowLastTabAsync">Last Tab</Button>
@code{
Tabs tabs;
private async Task ShowFirstTabAsync() => await tabs.ShowFirstTabAsync();
private async Task ShowSecondTabAsync() => await tabs.ShowTabByIndexAsync(1);
private async Task ShowThirdTabAsync() => await tabs.ShowTabByIndexAsync(2);
private async Task ShowProductsTabAsync() => await tabs.ShowTabByNameAsync("Products");
private async Task ShowFaqsAsync() => await tabs.ShowTabByNameAsync("FAQ");
private async Task ShowLastTabAsync() => await tabs.ShowLastTabAsync();
}
Events#
When showing a new tab, the events fire in the following order:
1. OnHiding
(on the current active tab)
2. OnShowing
(on the to-be-shown tab)
3. OnHidden
(on the previous active tab, the same one as for the OnHiding
event)
4. OnShown
(on the newly-active just-shown tab, the same one as for the OnShowing
event)
Event Name | Description |
---|---|
OnHiding |
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). |
OnHidden |
This event fires after a new tab is shown (and thus the previous active tab is hidden). |
OnShowing |
This event fires on tab show, but before the new tab has been shown. |
OnShown |
This event fires on tab show after a tab has been shown. |
INFO
If no tab was already active, then the
OnHiding
and OnHidden
events will not be fired.
<Tabs EnableFadeEffect="true"
OnShowing="@(args => OnTabShowingAsync(args))"
OnShown="@(args => OnTabShownAsync(args))"
OnHiding="@(args => OnTabHidingAsync(args))"
OnHidden="@(args => OnTabHiddenAsync(args))">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>
<div>
@foreach (var item in messages)
{
<p>Event: @item.Event, Active Tab: @item.ActiveTabTitle, Previous Tab: @item.PreviousActiveTabTitle </p>
}
</div>
@code {
record TabMessage(string Event, string ActiveTabTitle, string PreviousActiveTabTitle);
List<TabMessage> messages = new List<TabMessage>();
private void OnTabShowingAsync(TabsEventArgs args)
=> messages.Add(new("OnShowing", args.ActiveTabTitle, args.PreviousActiveTabTitle));
private void OnTabShownAsync(TabsEventArgs args)
=> messages.Add(new("OnShown", args.ActiveTabTitle, args.PreviousActiveTabTitle));
private void OnTabHidingAsync(TabsEventArgs args)
=> messages.Add(new("OnHiding", args.ActiveTabTitle, args.PreviousActiveTabTitle));
private void OnTabHiddenAsync(TabsEventArgs args)
=> messages.Add(new("OnHidden", args.ActiveTabTitle, args.PreviousActiveTabTitle));
}
Events - Example#
Current Active Tab:
Previous Active Tab:
<Tabs EnableFadeEffect="true"
OnShowing="@(args => OnTabShowingAsync(args))"
OnShown="@(args => OnTabShownAsync(args))"
OnHiding="@(args => OnTabHidingAsync(args))"
OnHidden="@(args => OnTabHiddenAsync(args))">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>
<p>Current Active Tab: <strong>@activeTabTitle</strong></p>
<p>Previous Active Tab: <strong>@previousActiveTabTitle</strong></p>
@code {
private string activeTabTitle;
private string previousActiveTabTitle;
private void OnTabShowingAsync(TabsEventArgs args)
{
//activeTabTitle = args.ActiveTabTitle;
//previousActiveTabTitle = args.PreviousActiveTabTitle;
}
private void OnTabShownAsync(TabsEventArgs args)
{
activeTabTitle = args.ActiveTabTitle;
previousActiveTabTitle = args.PreviousActiveTabTitle;
}
private void OnTabHidingAsync(TabsEventArgs args)
{
//activeTabTitle = args.ActiveTabTitle;
//previousActiveTabTitle = args.PreviousActiveTabTitle;
}
private void OnTabHiddenAsync(TabsEventArgs args)
{
//activeTabTitle = args.ActiveTabTitle;
//previousActiveTabTitle = args.PreviousActiveTabTitle;
}
}