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

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

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

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

SelectedItem

Specifies the index for activating the Tab item.

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

SelectedItemChanged

Gets or sets a callback of the bound value.

Declaration
public EventCallback<int> SelectedItemChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<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

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.

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

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

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.

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.