Tab

IsabyteTab

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

Tab Parameters

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.

User Profile

Profile tab with an icon. Tabs can contain forms, grids, or any other component.

Field	Value
Name	Demo User
Email	demo@example.com
Role	Administrator

Conditional Tab

This tab's visibility is controlled by the Visible parameter. Toggle it with the switch above.

When Visible="false", the tab header and content are completely hidden. The remaining tabs reflow automatically.

Settings

This tab demonstrates a settings-style layout with form controls inside tab content.

Display Name

This content is not reachable because the tab is disabled.

Current Configuration

📋

<IsabyteTab
    OnTabChanged="HandleTabChanged">
    <IsabyteTabItem Text="Home">
        <Icon>...</Icon>
        <ChildContent>...</ChildContent>
    </IsabyteTabItem>
    <IsabyteTabItem Text="Profile">
        <Icon>...</Icon>
        <ChildContent>...</ChildContent>
    </IsabyteTabItem>
    <IsabyteTabItem Text="Conditional" Visible="true">...</IsabyteTabItem>
    <IsabyteTabItem Text="Settings">...</IsabyteTabItem>
    <IsabyteTabItem Text="Disabled" Enabled="false">...</IsabyteTabItem>
</IsabyteTab>

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