Tab

The BptTab component provides a tabbed interface with contained and bar modes, icon support, alignment options, tab positions, visibility control, and customizable styling.

Tab Parameters

Mode: Contained

Alignment: Start

Position: Top

Border Color

#6c757d

Background Color

#ffffff

Border Width:

Component Enabled

Show Conditional Tab

Welcome Home

This tab demonstrates icon support alongside rich HTML content. Each tab can include any valid Blazor content as its body.

Icons are passed via the <Icon> render fragment and can be SVGs, icon fonts, or any markup.

Current Configuration

📋 [+]

<BptTab
    Mode="BptTabMode.Contained"
    Alignment="BptTabAlignment.Start"
    Position="BptTabPosition.Top"
    OnTabChanged="HandleTabChanged">
    <BptTabItem Text="Home">
        <Icon>...</Icon>
        <ChildContent>...</ChildContent>
    </BptTabItem>
    <BptTabItem Text="Profile">
        <Icon>...</Icon>
        <ChildContent>...</ChildContent>
    </BptTabItem>
    <BptTabItem Text="Conditional" Visible="true">...</BptTabItem>
    <BptTabItem Text="Settings">...</BptTabItem>
    <BptTabItem Text="Disabled" Enabled="false">...</BptTabItem>
</BptTab>

@code {
    private void HandleTabChanged(BptTabChangedEventArgs args)
    {
        Console.WriteLine($"Tab changed: index {args.TabIndex}, text {args.Text}");
    }
}