PSC.Blazor.Components.Segments 1.0.12

Blazor Tabs Component

This is a Tab component for Blazor Web Assembly and Blazor Server. The full explanation of the source code is on PureSourceCode.com. Please leave your comment or question and use my forum. Please subscribe my YouTube channel.

Anatomy of Tabs

Tabs container attributes

When you add the Tabs in your page, the first thing is the main container for tabs is Tabs. Tabs has 4 attributes:

Tabs container events

Also, Tabs has the following events that you can use.

Tab attributes

How to use

First, add the NuGet package in your project. The name of the package is PSC.Blazor.Components.Tabs and the only dependency it has is Microsoft.AspNetCore.Components.Web (>= 5.0.10).

After that, in your wwwroot\index.html or in the hosts file, you have to add a theme (CSS) for your segment control. Obviously, you can create your own theme. So, use this code:

<link href="_content/PSC.Blazor.Components.Tabs/themes/{theme-name}.css" rel="stylesheet" />

Example

@page "/test"

<Tabs TextFilling1="@text1" TextFilling2="@text2" OnTabChanged="OnTabChanged">
    <Tab Text="Tab 1" Value="Tab1">
        <h2>Content Tab 1</h2>
        <p>
            This is the content for the Tab 1. It is enabled.
        </p>
    </Tab>
    <Tab Text="Tab 2" Value="Tab2">
        <h2>Content Tab 2</h2>
        <p>
            This is the content for the Tab 2. It is enabled.
        </p>
    </Tab>
    <Tab Text="Tab 3" Value="Tab3">
        <h2>Content Tab 3</h2>
        <p>
            This is the content for the Tab 3. It is enabled.
        </p>
    </Tab>
    <Tab Text="Tab 4" Enabled="@IsEnabled" Value="Tab4">
        <h2>Content Tab 4</h2>
        <p>
            This is the content for the Tab 4. It is disabled if <i>IsEnabled = false</i>
        </p>
    </Tab>
</Tabs>

@code {
    public string text1 = "Text on the left";
    public string text2 = "Text on the right";

    public bool IsEnabled = false;

    public async Task OnTabChanged(Tab tab)
    {
        text1 = $"Tab value: {tab.Value}";
        text2 = $"Tab text: {tab.Text}";
    }
}

Themes

Blue

Green

Red

Light colors