TabControl

Description

This component represents a tabbed interface in Blazor using the Gap.Blazor.TabControl model. It uses the Telerik TabStrip component to render tab pages with customizable alignment, appearance, size mode, and visibility logic. It supports dynamic tab switching and layout updates based on model changes.

Usage

@if (this.Visible)
{
    <div class="@(this.TabControl.GetStringClasses())">
        <WMStyleBase model=@this.TabControl></WMStyleBase>

        <TelerikTabStrip Class="@(this.GetAppearanceStringClass())"
                         Height="100%"
                         ActiveTabIndex="this.GetActiveTabIndex()"
                         ActiveTabIndexChanged="TabChangedHandler"
                         TabPosition="(TabPosition)this.TabControl.Alignment"
                         Scrollable="!this.TabControl.Multiline"
                         TabAlignment="this.GetTabAlignmentFromSizeMode()">
            @ChildContent
        </TelerikTabStrip>

        <style>
            .@(this.TabControl.GetComponentClass()) .k-item {
                font-size: @this.TabControl.Font.GetFontSize();
                font-weight: @this.TabControl.Font.GetFontWeight();
                font-style: @this.TabControl.Font.GetFontStyle();
                font-family: @this.TabControl.Font.GetFontFamily();
                text-decoration: @this.TabControl.Font.GetTextDecoration();
            }

            .@(this.TabControl.GetComponentClass()) .k-item {
                height: @this.GetItemSizeHeight();
                width: @this.GetItemSizeWith();
            }

            .@(this.TabControl.GetComponentClass()) .k-tabstrip-items-wrapper > .k-button {
                height: @this.GetItemSizeHeight();
            }
        </style>
    </div>
}

Properties

• TabControl: Instance of the Gap.Blazor.TabControl model.

• ChildContent: The tab pages to be rendered inside the tab strip.

• Alignment: Determines the position of the tabs (Top, Bottom, Left, Right).

• Appearance: Controls the visual style of the tabs (Normal, Buttons, FlatButtons).

• SizeMode: Controls how tab sizes are calculated (Fixed, FillToRight).

• Multiline: If false, enables horizontal scrolling for tabs.

Methods

• OnInitialized(): Subscribes to model events for alignment, appearance, size, multiline, and tab collection changes.

• GetAppearanceStringClass(): Returns a CSS class based on the Appearance setting.

• GetItemSizeHeight() / GetItemSizeWith(): Calculates tab dimensions based on alignment and size mode.

• GetTabAlignmentFromSizeMode(): Maps SizeMode to Telerik’s TabStripTabAlignment.

• TabChangedHandler(int): Updates the selected tab index, accounting for hidden tabs.

• GetActiveTabIndex(): Returns the index of the currently selected tab, adjusted for visibility.

Dynamic Rendering

• TelerikTabStrip: Renders the tab interface with dynamic alignment, appearance, and scroll behavior.

• CSS Styling: Font and size styles are applied per tab item based on the model.

• Visibility Logic: Adjusts tab index to account for hidden tabs using VisibleAffected() and GetPageIndex().

Styles

[e-mail]() .k-item {
    font-size: [from model];
    font-weight: [from model];
    font-style: [from model];
    font-family: [from model];
    text-decoration: [from model];
    height: [calculated];
    width: [calculated];
}

[e-mail]() .k-tabstrip-items-wrapper > .k-button {
    height: [calculated];
}

Events

• AlignmentChanged

• AppearanceChanged

• ItemSizeChanged

• MultilineChanged

• SizeModeChanged

• SelectedIndexChanged

• Controls Collection Events: AfterAdd, AfterRemove, AfterClear, AfterInsert