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