menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfTab - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfTab

    Tab is a content panel to show multiple contents in a compact space. Also, only one tab is active at a time. Each Tab item has an associated content, that will be displayed based on the active Tab.

    Inheritance
    System.Object
    SfBaseComponent
    SfTab
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Navigations
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SfTab : SfBaseComponent
    Remarks

    Tab items can be populated by specifying TabItem within TabItems tag directive.

    Examples

    In the below code example, a basic tab component initialized with TabItems tag directive.

    <SfTab>
        <TabItems>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Tab 1"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div>Content of tab 1</div>
                </ContentTemplate>
            </TabItem>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Tab 2"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div>Content of tab 2</div>
                </ContentTemplate>
            </TabItem>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Tab 3"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div>Content of tab 3</div>
                </ContentTemplate>
            </TabItem>
        </TabItems>
    </SfTab>

    Constructors

    SfTab()

    Declaration
    public SfTab()

    Properties

    AllowDragAndDrop

    Gets or sets whether the tab allows drag and drop over tab items.

    Declaration
    public bool AllowDragAndDrop { get; set; }
    Property Value
    Type Description
    System.Boolean

    false, the drag and drop action in tab, The default value is true.

    Remarks

    Tab item has been reordered based on the dropped item.

    Animation

    Gets or sets the animation to appear while activating the TabItem.

    Declaration
    public TabAnimationSettings Animation { get; set; }
    Property Value
    Type Description
    TabAnimationSettings

    TabAnimationSettings value is applied for previous/next tab switching, By default null value is set.

    ChildContent

    Gets or sets the child content of tab component.

    Declaration
    public RenderFragment ChildContent { get; set; }
    Property Value
    Type
    Microsoft.AspNetCore.Components.RenderFragment

    CssClass

    Gets or sets the custom classes to customize the tab component.

    Declaration
    public string CssClass { get; set; }
    Property Value
    Type Description
    System.String

    A string containing one or more CSS classes separated by spaces, applied to the tab element. The default value is string.Empty.

    Examples
    <SfTab CssClass="custom-tab"></SfTab>

    DragArea

    Gets or sets the area to move the draggable element, Outside that area dragging will be restricted.

    Declaration
    public string DragArea { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a string value. The default value is null.

    Remarks

    By default, the draggable element movement occurs with in tabitems. DragArea value is applied only when AllowDragAndDrop property is enabled.

    Examples

    In below example tab items can be able to drag with in the e-tab-container selector.

     
    <div class="e-tab-container">
        <SfTab ID="tab_1" AllowDragAndDrop="true" DragArea=".e-tab-container"></SfTab>
    </div>

    EnablePersistence

    Gets or sets whether to persist component's state between page reloads. When set to true, the SelectedItem property is persisted.

    Declaration
    public bool EnablePersistence { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the component's state persistence is enabled. The default value is false.

    Remarks

    Component's SelectedItem property will be stored in browser local storage to persist component's state when page reloads. It is mandatory to provide ID to persist SelectedItem property.

    EnableRtl

    Gets or sets whether the right to left direction is enabled for tab component.

    Declaration
    public bool EnableRtl { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, the right to left direction is enabled for tab component. The default value is false.

    HeaderPlacement

    Gets or sets a value that specifies the orientation of the tab header.

    Declaration
    public HeaderPosition HeaderPlacement { get; set; }
    Property Value
    Type Description
    HeaderPosition

    One of the HeaderPosition enumeration. The default value is Top

    Remarks

    If the HeaderPosition is Top, Places the Tab header on the top. If the HeaderPosition is Bottom, Places the Tab header at the bottom. If the HeaderPosition is Left, Places the Tab header at the left. If the HeaderPosition is Right, Places the Tab header at the right.

    Height

    Gets or sets the height of the tab element in pixels/number/percentage.

    Declaration
    public string Height { get; set; }
    Property Value
    Type Description
    System.String

    If we set the height value, then the tab will render based on specified height otherwise the default height value auto is set.

    Remarks

    If we set number values, then it is considered as pixels. By default, Tab height is set based on the height of its parent.

    HtmlAttributes

    Gets or sets a collection of additional attributes that will applied to the tab element.

    Declaration
    public Dictionary<string, object> HtmlAttributes { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.Dictionary<System.String, System.Object>

    It allows the tab component to render non-declared attributes. The default value is null.

    Remarks

    Additional attributes can be added by specifying as in-line attributes or by specifying @attributes directive.

    Examples
     
    <SfTab tabindex="0"></SfTab>

    ID

    Gets or sets the unique Id value for tab component.

    Declaration
    public string ID { get; set; }
    Property Value
    Type Description
    System.String

    If we set the id, then the id value set for tab element. The default value is null.

    Items

    Gets or sets the list of tab items that will be populated using the TabItems tag directive.

    Declaration
    public List<TabItem> Items { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.List<TabItem>

    TabItems

    LoadOn

    Gets or sets a value that specifies the content render modes of tab component.

    Declaration
    public ContentLoad LoadOn { get; set; }
    Property Value
    Type Description
    ContentLoad

    One of the ContentLoad enumeration. The default value is Dynamic

    Remarks

    If the ContentLoad is Dynamic, renders the tab content dynamically when switching its header. If the ContentLoad is Init, renders all the tab content on initial loading. If the ContentLoad is Demand, renders the tab content when required but keeps the content once it is rendered.

    Locale

    Gets or sets a culture which overrides the global culture and localization value for this component.

    Declaration
    public string Locale { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a string value. The default value is string.Empty.

    Remarks

    By default global culture is 'en-US'.

    OverflowMode

    Gets or sets a value that indicates how to display tab header items when the tab exceeds the viewing area.

    Declaration
    public OverflowMode OverflowMode { get; set; }
    Property Value
    Type Description
    OverflowMode

    One of the OverflowMode enumeration. The default value is Scrollable

    Remarks

    If the OverflowMode is Scrollable, all the elements are displayed in a single line with enabled horizontal scrolling. If the OverflowMode is Popup, tab container will hold the items that can be placed within the available space and the rest of the items will be moved to the popup.

    ReorderActiveTab

    Gets or sets whether to re-order tab items to show active tab item in the header area or popup when OverflowMode is popup.

    Declaration
    public bool ReorderActiveTab { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if active tab item should be visible in header area instead of pop-up; otherwise, false. The default value is true.

    Remarks

    ReorderActiveTab Property is only applicable when OverflowMode is popup.

    ScrollStep

    Gets or sets the scrolling distance of tab header when scrolling is enabled.

    Declaration
    public int ScrollStep { get; set; }
    Property Value
    Type Description
    System.Int32

    When the left/right navigation icon is clicked, then the tab header scrolled based on the specified value otherwise the default value 0 is set.

    Remarks

    This property is applicable only when Scrollable is set.

    Examples
    <SfTab ScrollStep="50"></SfTab> 

    SelectedItem

    Gets or sets the index of active tab item.

    Declaration
    public int SelectedItem { get; set; }
    Property Value
    Type Description
    System.Int32

    If we set the index of tab item, then the specified index were set as selected tab item otherwise the default 0 value is set.

    Examples
     
    <STab SelectedItem="1"></SfTab>

    SelectedItemChanged

    Invokes when index of selected item were changed.

    Declaration
    public EventCallback<int> SelectedItemChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Int32>

    Fired when selected item index changes.

    ShouldReinitialize

    Gets or sets a value that indicates whether re-initialize the tab content on every TabItem initialization.

    Declaration
    public bool ShouldReinitialize { get; set; }
    Property Value
    Type Description
    System.Boolean

    true to enable SfTab re-initialization on TabItem component initialization; otherwise, false.

    Remarks

    Use this property to control the rendering behavior of tab content in relation to the Blazor stream rendering feature.

    ShowCloseButton

    Gets or sets whether to show the close button in the tab header or not.

    Declaration
    public bool ShowCloseButton { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, to show the close button in tab header. The default value is false is set.

    SwipeMode

    Gets or sets whether the tab transition should occur or not when performing Touch/Mouse swipe action.

    Declaration
    public TabSwipeMode SwipeMode { get; set; }
    Property Value
    Type Description
    TabSwipeMode

    One of the TabSwipeMode enumeration values that represents the swiping action for the tabs. The default value is TabSwipeMode.Touch | TabSwipeMode.Mouse

    Remarks

    SwipeMode = TabSwipeMode.Touch | TabSwipeMode.Mouse: Enables swiping for both touch and mouse input.

    SwipeMode = TabSwipeMode.Touch: Enables swiping only for touch input.

    SwipeMode = TabSwipeMoe.Mouse: Enables swiping only for mouse input.

    SwipeMode = ~TabSwipeMode.Touch | ~TabSwipeMode.Mouse: Disables swiping for both touch and mouse input.

    Width

    Gets or sets the width of the tab element in pixels/number/percentage.

    Declaration
    public string Width { get; set; }
    Property Value
    Type Description
    System.String

    If we set the width value, then the tab will render based on specified width otherwise the default width value 100% is set.

    Remarks

    If we set number values, then it is considered as pixels. By default, Tab width sets based on the width of its parent.

    Methods

    AddTab(List<TabItem>, Int32)

    Adds new items to the Tab that accepts a list of Tab items.

    Declaration
    public Task AddTab(List<TabItem> items, int index)
    Parameters
    Type Name Description
    System.Collections.Generic.List<TabItem> items

    A list of items that are added to the Tab.

    System.Int32 index

    Specifies an index value that determines where the items to be added.

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    DisableAsync(Boolean)

    Specifies the value to disable or enable the Tabs component. When set to true, the component will be disabled.

    Declaration
    public Task DisableAsync(bool disable)
    Parameters
    Type Name Description
    System.Boolean disable

    Based on this Boolean value, Tab will be enabled (false) or disabled (true).

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    EnableTabAsync(Int32, Boolean)

    Enables or disables a particular tab item. On passing the value as false, the tab will be disabled.

    Declaration
    public Task EnableTabAsync(int index, bool isEnable)
    Parameters
    Type Name Description
    System.Int32 index

    Index value of target Tab item.

    System.Boolean isEnable

    Specify a Boolean value that determines whether the command should be enabled or disabled. By default, isEnable has true.

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    GetTabContent(Int32)

    Returns the tab content element based on the specified index.

    Declaration
    public Task<DOM> GetTabContent(int index)
    Parameters
    Type Name Description
    System.Int32 index

    Index is used for accessing tab content element from the Tab.

    Returns
    Type Description
    System.Threading.Tasks.Task<DOM>

    A System.Threading.Tasks.Task representing any asynchronous operation.

    GetTabItem(Int32)

    Return a tab item element based on the specified index.

    Declaration
    public Task<DOM> GetTabItem(int index)
    Parameters
    Type Name Description
    System.Int32 index

    Index is used for accessing tab header item element from the Tab.

    Returns
    Type Description
    System.Threading.Tasks.Task<DOM>

    A System.Threading.Tasks.Task representing any asynchronous operation.

    GetTabItemById(String)

    Retrieves a tab item based on the specified id.

    Declaration
    public TabItem GetTabItemById(string id)
    Parameters
    Type Name Description
    System.String id

    id is used for accessing tab item from the Tab

    Returns
    Type Description
    TabItem

    Returns the tab item

    GetTabItemByIndex(Int32)

    Retrieves a tab item based on the specified index.

    Declaration
    public TabItem GetTabItemByIndex(int index)
    Parameters
    Type Name Description
    System.Int32 index

    Index is used for accessing tab item from the Tab

    Returns
    Type Description
    TabItem

    Returns the tab item

    HideTabAsync(Int32, Nullable<Boolean>)

    Shows or hides a particular Tab based on the specified index.

    Declaration
    public Task HideTabAsync(int index, Nullable<bool> isHide = null)
    Parameters
    Type Name Description
    System.Int32 index

    Index value of target item.

    System.Nullable<System.Boolean> isHide

    Based on this Boolean value, item will be hide (false) or show (true).

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    OnAfterRenderAsync(Boolean)

    Method invoked after each time the component has been rendered.

    Declaration
    protected override Task OnAfterRenderAsync(bool firstRender)
    Parameters
    Type Name Description
    System.Boolean firstRender

    Set to true for the first time component rendering; otherwise gets false.

    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Overrides
    SfBaseComponent.OnAfterRenderAsync(Boolean)

    OnInitializedAsync()

    Method invoked when the component is ready to start.

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Overrides
    SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties.

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    PreventRender(Boolean)

    Prevents the Tab render. This method will internally sets value to be returned from ShouldRender method.

    Declaration
    public void PreventRender(bool preventRender = true)
    Parameters
    Type Name Description
    System.Boolean preventRender

    Default value is true. Toggles the ShouldRender method value.

    RefreshAsync()

    Refresh the entire tabs component.

    Declaration
    public Task RefreshAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    RemoveTab(Int32)

    Removes a particular Tab based on index from the Tabs.

    Declaration
    public Task RemoveTab(int index)
    Parameters
    Type Name Description
    System.Int32 index

    Index of tab item that is going to be removed.

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    SelectAsync(Int32)

    Select (activate) a particular tab based on the specified index.

    Declaration
    public Task SelectAsync(int index)
    Parameters
    Type Name Description
    System.Int32 index

    Index is used for selecting an item from the Tab.

    Returns
    Type Description
    System.Threading.Tasks.Task

    System.Threading.Tasks.Task.

    ShouldRender()

    Declaration
    protected override bool ShouldRender()
    Returns
    Type
    System.Boolean
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved