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

Syncfusion.Blazor.SfBaseComponent

SfTab

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfTab : SfBaseComponent

Constructors

SfTab()

Declaration

public SfTab()

Properties

AllowDragAndDrop

Indicates whether the Tab allows drag and drop over tab items. Tab item has been reordered based on the dropped item.

Declaration

public bool AllowDragAndDrop { get; set; }

Property Value

Type	Description
System.Boolean

Animation

Specifies the animation settings of the Tabs component. The animation effect can be applied to activate the tab with duration and delay.

Declaration

public TabAnimationSettings Animation { get; set; }

Property Value

Type	Description
TabAnimationSettings

ChildContent

Child Content for Tab.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment

CssClass

Sets the CSS classes to the root element of the Tabs that helps to customize the component styles.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String

DragArea

Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted for the draggable element movement. By default, the draggable element movement occurs with Tabitems.

Declaration

public string DragArea { get; set; }

Property Value

Type	Description
System.String

EnablePersistence

Enable or disable persisting component's state between page reloads. If enabled, the tab’s selected item will be persisted.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean

EnableRtl

Enable or disable rendering component in the right to left (RTL) direction.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean

HeaderPlacement

Specifies the orientation of the Tab header. The possible values are:

• Top: Places the Tab header on the top.
• Bottom: Places the Tab header at the bottom.
• Left: Places the Tab header at the left.
• Right: Places the Tab header at the right.

Declaration

public HeaderPosition HeaderPlacement { get; set; }

Property Value

Type	Description
HeaderPosition

Height

Specifies the height of the Tabs component. By default, Tab height is set based on the height of its parent.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String

HtmlAttributes

You can add the additional html attributes such as id, title etc., to the tab element. If you configured both property and equivalent html attribute then the component considers the property value.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>

ID

Sets ID attribute for the tab element.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String

Items

A list of items that are used to configure the Tabs component.

Declaration

public List<TabItem> Items { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<TabItem>

LoadOn

Specifies the modes for the Tab content. The possible modes are: Dynamic Load the Tab content dynamically, which is rendering its content when switching its header. Init Loads all the tab contents on initial loading. Demand Loads the Tab content when required but keeps the content once it is rendered.

Declaration

public ContentLoad LoadOn { get; set; }

Property Value

Type	Description
ContentLoad

Locale

Overrides the global culture and localization value for this component. Default global culture is 'en-US'.

Declaration

public string Locale { get; set; }

Property Value

Type	Description
System.String

OverflowMode

Specifies the display mode which will be applied when the Tabs exceeds the viewing area. The possible modes are:

• Scrollable: All the elements will be displayed in a single line with horizontal scrolling enabled.
• 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.

Declaration

public OverflowMode OverflowMode { get; set; }

Property Value

Type	Description
OverflowMode

ScrollStep

Specifies the scrolling distance that applies when scrolling in Tab and enabled Scrollable mode.

Declaration

public int ScrollStep { get; set; }

Property Value

Type	Description
System.Int32

ShowCloseButton

Specifies a value that indicates whether to show the close button in the Tab header or not.

Declaration

public bool ShowCloseButton { get; set; }

Property Value

Type	Description
System.Boolean

Width

Specifies the width of the Tabs component. By default, Tab width sets based on the width of its parent.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String

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

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.

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

Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(System.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

Syncfusion.Blazor.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.

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.