Class TabItem

A class that represents tab component item of SfTab component.

Inheritance

System.Object

TabItem

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class TabItem : OwningComponentBase

Remarks

You can render header and content of tab by specifying value to corresponding property.

Examples

In the below code example, a basic tab item has been added using TabItem 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

TabItem()

Declaration

public TabItem()

Properties

ChildContent

Gets or sets the child content for the tab item.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The value used to build the content.

Content

Gets or sets the text content to be displayed for tab item.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is string.Empty.

ContentTemplate

Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of tab content.

Declaration

public RenderFragment ContentTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A template content that specifies the visualization of tab content. The default value is null.

Examples

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

CssClass

Gets or sets the classes for tab item to customize the tab header and content.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	If we set the css class, then the custom class is applied for tab item. The default value is string.Empty.

Examples

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

Disabled

Gets or sets whether the tab panel is disabled or not.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	true, to disable the tab panel. The default value is false.

Header

Gets or sets the header content of tab item.

Declaration

public TabHeader Header { get; set; }

Property Value

Type	Description
TabHeader	If we set the header, then the provided TabHeader value is rendered, otherwise the default null value is set.

HeaderTemplate

Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of tab header.

Declaration

public RenderFragment HeaderTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A template content that specifies the visualization of tab header. The default value is null.

Examples

<SfTab>
    <TabItems>
        <TabItem Content="Content of tab 1">
            <HeaderTemplate>Tab 1</HeaderTemplate>
        </TabItem>
    </TabItems>
</SfTab>

ID

Gets or sets the unique ID for tab item.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is null.

TabIndex

Gets or sets the tab order of the tab items. When positive values assigned, it allows to switch focus to the next/previous tabs items with Tab/ShiftTab keys.

Declaration

public int TabIndex { get; set; }

Property Value

Type	Description
System.Int32	Tab index of tabs item. The default value is -1.

Remarks

By default, user can able to switch between items only via arrow keys. If the value is set to 0 for all tool bar items, then tab switches based on element order.

Visible

Gets or sets whether the tab panel is hidden or not.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	false, to hide the tab panel. The default value is true.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose(Boolean)

Dispose unmanaged resources in the Syncfusion Blazor component.

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	Boolean value to dispose the object.

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.

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.