sufi-blazor/docs/components/navigation/SbTabs.md

SbTabs

A tabbed navigation component for switching between different content panels.

Parameters

Parameter	Type	Default	Description
ActiveIndex	int	0	The active tab index (0-based)
ActiveTab	string?	null	The active tab ID (string-based selection)
LazyLoad	bool	false	Whether to lazy-load tab content
Vertical	bool	false	When true, tabs are vertical (side-by-side with content)
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
ActiveIndexChanged	EventCallback<int>	Fired when active tab index changes
ActiveTabChanged	EventCallback<string?>	Fired when active tab ID changes

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment	Tab content (SbTab components)

CSS Classes

• sb-tabs - Base class
• sb-tabs--vertical - Vertical layout (tabs on side, content adjacent). Applied when Vertical="true".
• sb-tabs__list - Tab list container
• sb-tabs__tab - Individual tab button
• sb-tabs__tab--active - Active tab
• sb-tabs__tab--disabled - Disabled tab
• sb-tabs__tab-icon - Tab icon
• sb-tabs__tab-label - Tab label text
• sb-tabs__tab-badge - Tab badge
• sb-tabs__content - Content container

Accessibility

• Uses role="tablist" and role="tab" for tab buttons
• Uses role="tabpanel" for content panels
• Supports aria-selected, aria-controls, and hidden attributes

Examples

Basic Usage

<SbTabs>
    <SbTab Label="General">
        <p>General settings content</p>
    </SbTab>
    <SbTab Label="Security">
        <p>Security settings content</p>
    </SbTab>
    <SbTab Label="Notifications">
        <p>Notification settings content</p>
    </SbTab>
</SbTabs>

With Icons

<SbTabs>
    <SbTab Label="Home">
        <Icon><SbIcon Name="home" /></Icon>
        <ChildContent>Home content</ChildContent>
    </SbTab>
    <SbTab Label="Profile">
        <Icon><SbIcon Name="user" /></Icon>
        <ChildContent>Profile content</ChildContent>
    </SbTab>
    <SbTab Label="Settings">
        <Icon><SbIcon Name="settings" /></Icon>
        <ChildContent>Settings content</ChildContent>
    </SbTab>
</SbTabs>

With Badges

<SbTabs>
    <SbTab Label="Inbox">
        <Badge><SbBadge Value="5" /></Badge>
        <ChildContent>Inbox messages</ChildContent>
    </SbTab>
    <SbTab Label="Sent">
        <ChildContent>Sent messages</ChildContent>
    </SbTab>
    <SbTab Label="Drafts">
        <Badge><SbBadge Value="2" /></Badge>
        <ChildContent>Draft messages</ChildContent>
    </SbTab>
</SbTabs>

Controlled Tabs (Index-based)

<SbTabs @bind-ActiveIndex="activeTab">
    <SbTab Label="Tab 1">Content 1</SbTab>
    <SbTab Label="Tab 2">Content 2</SbTab>
    <SbTab Label="Tab 3">Content 3</SbTab>
</SbTabs>

@code {
    private int activeTab = 0;
}

Controlled Tabs (ID-based)

<SbTabs @bind-ActiveTab="activeTabId">
    <SbTab Id="general" Label="General">General content</SbTab>
    <SbTab Id="advanced" Label="Advanced">Advanced content</SbTab>
    <SbTab Id="about" Label="About">About content</SbTab>
</SbTabs>

@code {
    private string? activeTabId = "general";
}

Vertical Tabs (sidebar layout)

<SbTabs Vertical="true" @bind-ActiveTab="activeTabId">
    <SbTab Id="general" Label="General">General settings</SbTab>
    <SbTab Id="security" Label="Security">Security settings</SbTab>
</SbTabs>

With Disabled Tab

<SbTabs>
    <SbTab Label="Active">Active tab content</SbTab>
    <SbTab Label="Another">Another tab content</SbTab>
    <SbTab Label="Disabled" Disabled="true">
        This content is inaccessible
    </SbTab>
</SbTabs>

Lazy Loading

<SbTabs LazyLoad="true">
    <SbTab Label="Basic">
        <p>Basic info (loaded immediately)</p>
    </SbTab>
    <SbTab Label="Heavy Content">
        @* This content is only rendered when tab is first activated *@
        <ExpensiveComponent />
    </SbTab>
</SbTabs>

Settings Page Layout

<SbCard>
    <SbTabs>
        <SbTab Label="Profile">
            <SbStack Gap="4" Class="p-4">
                <SbTextField Label="Name" @bind-Value="name" />
                <SbTextField Label="Email" @bind-Value="email" />
                <SbButton>Save Profile</SbButton>
            </SbStack>
        </SbTab>
        <SbTab Label="Password">
            <SbStack Gap="4" Class="p-4">
                <SbTextField Label="Current Password" Type="password" />
                <SbTextField Label="New Password" Type="password" />
                <SbTextField Label="Confirm Password" Type="password" />
                <SbButton>Update Password</SbButton>
            </SbStack>
        </SbTab>
        <SbTab Label="Preferences">
            <SbStack Gap="4" Class="p-4">
                <SbSwitch Label="Dark Mode" @bind-Value="darkMode" />
                <SbSwitch Label="Email Notifications" @bind-Value="emailNotifications" />
                <SbButton>Save Preferences</SbButton>
            </SbStack>
        </SbTab>
    </SbTabs>
</SbCard>