Component

BOBTabs

Tab panels with three visual variants. Declare tabs as children — the active one renders automatically.

API reference ↗

Basic usage

Overview content — the first tab is active by default.
RAZOR 
<BOBTabs @bind-ActiveTab="_basic">
    <BOBTab Id="overview" Label="Overview">
        Overview content — the first tab is active by default.
    </BOBTab>
    <BOBTab Id="details" Label="Details">
        Details content.
    </BOBTab>
    <BOBTab Id="reviews" Label="Reviews">
        Reviews content.
    </BOBTab>
</BOBTabs>

Variants

Underline (default), Pills, and Enclosed.

Billing details.
Notifications tab.
RAZOR 
<div class="demo-stack">
    <BOBTabs Variant="BOBTabsVariant.Pills" @bind-ActiveTab="_pills">
        <BOBTab Id="account" Label="Account">
            Account settings.
        </BOBTab>
        <BOBTab Id="billing" Label="Billing">
            Billing details.
        </BOBTab>
        <BOBTab Id="team" Label="Team">
            Team members.
        </BOBTab>
    </BOBTabs>
    <BOBTabs Variant="BOBTabsVariant.Enclosed" @bind-ActiveTab="_enclosed">
        <BOBTab Id="profile" Label="Profile">
            Profile tab.
        </BOBTab>
        <BOBTab Id="notifications" Label="Notifications">
            Notifications tab.
        </BOBTab>
        <BOBTab Id="security" Label="Security">
            Security tab.
        </BOBTab>
    </BOBTabs>
</div>

Full width

Inbox.
RAZOR 
<BOBTabs FullWidth="true" @bind-ActiveTab="_full">
    <BOBTab Id="inbox" Label="Inbox">
        Inbox.
    </BOBTab>
    <BOBTab Id="sent" Label="Sent">
        Sent messages.
    </BOBTab>
    <BOBTab Id="archive" Label="Archive">
        Archive.
    </BOBTab>
</BOBTabs>

Disabled tab

General settings.
RAZOR 
<BOBTabs @bind-ActiveTab="_disabled">
    <BOBTab Id="general" Label="General">
        General settings.
    </BOBTab>
    <BOBTab Id="pro" Label="Pro features" Disabled="true">
        Unreachable content.
    </BOBTab>
    <BOBTab Id="about" Label="About">
        About page.
    </BOBTab>
</BOBTabs>

Properties

BOBTabs

5 rows.
PropertyTypeDefaultDescription
ChildContentRenderFragment?Markup that emits the tab definitions (typically &lt;BOBTab&gt; children).
ActiveTabstring?ActiveTab.
ActiveTabChangedEventCallback<string?>ActiveTabChanged.
FullWidthboolWhen , the component spans the full width of its container.
SizeBOBSizeBOBSize.MediumVisual size of the tab bar.

BOBTab

5 rows.
PropertyTypeDefaultDescription
Idstring?Stable identifier for the tab. Used to track activation. Required.
Labelstring?Visible tab label. Required.
IconRenderFragment?Optional icon rendered next to the label.
ChildContentRenderFragment?Content rendered inside the component.
DisabledboolWhen , the component is non-interactive.