Class TabItem

A class that represents tab component item of SfTab component.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
TabItem
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class TabItem : SfOwningComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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
[Parameter]
[JsonIgnore]
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragment

The value used to build the content.

Content

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

Declaration
[Parameter]
public string Content { get; set; }
Property Value
Type Description
string

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

ContentTemplate

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

Declaration
[Parameter]
[JsonIgnore]
public RenderFragment ContentTemplate { get; set; }
Property Value
Type Description
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
[Parameter]
public string CssClass { get; set; }
Property Value
Type Description
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
[Parameter]
public bool Disabled { get; set; }
Property Value
Type Description
bool

true, to disable the tab panel. The default value is false.

Header

Gets or sets the header content of tab item.

Declaration
[Parameter]
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 RenderFragment, that defines custom appearance of tab header.

Declaration
[Parameter]
[JsonIgnore]
public RenderFragment HeaderTemplate { get; set; }
Property Value
Type Description
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
[Parameter]
public string ID { get; set; }
Property Value
Type Description
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
[Parameter]
public int TabIndex { get; set; }
Property Value
Type Description
int

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
[Parameter]
public bool Visible { get; set; }
Property Value
Type Description
bool

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
RenderTreeBuilder __builder
Overrides

Dispose(bool)

Dispose unmanaged resources in the Syncfusion Blazor component.

Declaration
protected override void Dispose(bool disposing)
Parameters
Type Name Description
bool disposing

Boolean value to dispose the object.
Overrides

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
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
Task

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

Implements