Tabs

Documentation and examples for how to use Tabs component.

API Documentation

Example #

This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs>
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Alignment #

This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Alignment="TabsAlignment.Center">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Alignment="TabsAlignment.Right">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Sizes #

This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Size="TabsSize.Small">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Size="TabsSize.Medium">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Size="TabsSize.Large">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Styles #

This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Type="TabsType.Boxed">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Type="TabsType.Rounded">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Full width #

This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs IsFullWidth="true">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Combined #

This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Alignment="TabsAlignment.Center" Type="TabsType.Boxed">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Type="TabsType.Boxed" IsFullWidth="true">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Type="TabsType.Rounded" IsFullWidth="true">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Alignment="TabsAlignment.Center" Type="TabsType.Boxed" Size="TabsSize.Medium">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Methods #

Name Return type Description
GetActiveTab() Tab Gets the active tab.
RemoveTabByIndex(int tabIndex) - Removes the tab by index.
RemoveTabByName(string tabName) - Removes the tab by name.
ShowFirstTab() - Selects the first tab and show its associated pane.
ShowLastTab() - Selects the last tab and show its associated pane.
ShowTabByIndex(int tabIndex) Tab Selects the tab by index and show its associated pane.
ShowTabByName(string tabName) Tab Selects the tab by name and show its associated pane.
This is the placeholder content for the Home tab.
This is the placeholder content for the Profile tab.
This is the placeholder content for the Contact tab.
This is the placeholder content for the Products tab.
This is the placeholder content for the FAQs tab.
This is the placeholder content for the About tab.
RAZOR
<Tabs @ref="tabsRef">
    <Tab Title="Home">
        <div class="pt-3">This is the placeholder content for the <b>Home</b> tab.</div>
    </Tab>
    <Tab Title="Profile">
        <div class="pt-3">This is the placeholder content for the <b>Profile</b> tab.</div>
    </Tab>
    <Tab Title="Contact">
        <div class="pt-3">This is the placeholder content for the <b>Contact</b> tab.</div>
    </Tab>
    <Tab Title="Products" Name="Products">
        <div class="pt-3">This is the placeholder content for the <b>Products</b> tab.</div>
    </Tab>
    <Tab Title="FAQs" Name="FAQs">
        <div class="pt-3">This is the placeholder content for the <b>FAQs</b> tab.</div>
    </Tab>
    <Tab Title="About">
        <div class="pt-3">This is the placeholder content for the <b>About</b> tab.</div>
    </Tab>
</Tabs>

<Buttons Class="mt-5">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="() => tabsRef.ShowFirstTab()">First Tab</Button>
    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="() => tabsRef.ShowTabByIndex(1)">Second Tab</Button>
    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="() => tabsRef.ShowTabByIndex(2)">Third Tab</Button>
    <Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowProductsTab">Products Tab</Button>
    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="ShowFAQsTab">FAQs Tab</Button>
    <Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="() => tabsRef.ShowLastTab()">Last Tab</Button>
</Buttons>

@code{
    Tabs tabsRef = default!;

    private void ShowProductsTab() => tabsRef.ShowTabByName("Products");
    private void ShowFAQsTab() => tabsRef.ShowTabByName("FAQs");
}

Events #

When displaying a new tab, the events fire in the following sequence:
Name Event args Description
OnHidden TabEventArgs This event fires after a new tab is shown (and thus the previous active tab is hidden).
OnShown TabEventArgs This event fires on tab show after a tab has been shown.
OnTabChanged TabsEventArgs This event fires when the user clicks the corresponding tab and the tab is displayed.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs @ref="tabsRef"
      OnHidden="OnHidden"
      OnShown="OnShown"
      OnTabChanged="OnTabChanged">
    <Tab Title="Pictures">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

<div class="mt-5" style="max-height:200px;overflow-y:auto;">
    @foreach (var item in messages)
    {
        <p>Event: @item.Event, Message: @item.Message, UTC Time: @item.TimeStamp</p>
    }
</div>

@code {
    Tabs tabsRef = default!;
    List<TabMessage> messages = new List<TabMessage>();

    private void OnHidden(TabEventArgs args) => messages.Add(new("OnHidden", $"Tab Title: {args.Tab.Title!}", DateTime.UtcNow));
    private void OnShown(TabEventArgs args) => messages.Add(new("OnShown", $"Tab Title: {args.Tab.Title!}", DateTime.UtcNow));
    private void OnTabChanged(TabsEventArgs args) => messages.Add(new("OnTabChanged", $"Active Tab Title: {args.ActiveTab.Title!}, Previous Active Tab: {args.PreviousActiveTab.Title!}", DateTime.UtcNow));

    private record TabMessage(string Event, string Message, DateTime TimeStamp);
}
If you like BlazorExpress.Bulma, give it a star on GitHub!