Class RadzenTabs

A tabbed interface component that organizes content into multiple panels with clickable tabs for navigation. RadzenTabs allows users to switch between different views or sections without navigating away from the page. Provides a container for RadzenTabsItem components, each representing one tab and its associated content panel. Supports tab positioning at Top, Bottom, Left, Right, TopRight, or BottomRight, server-side rendering (default) or client-side rendering for improved interactivity, programmatic selection via SelectedIndex with two-way binding, Change event when tabs are switched, dynamic tab addition/removal using AddTab() and RemoveItem(), keyboard navigation (Arrow keys, Home, End, Space, Enter) for accessibility, and disabled tabs to prevent selection. Use Server render mode for standard Blazor rendering, or Client mode for faster tab switching with JavaScript.

Inheritance

object

ComponentBase

RadzenComponent

RadzenTabs

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenTabs : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Examples

Basic tabs with server-side rendering:

<RadzenTabs>
    <Tabs>
        <RadzenTabsItem Text="Orders">
            Order list and details...
        </RadzenTabsItem>
        <RadzenTabsItem Text="Customers">
            Customer information...
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

Tabs with client-side rendering and change event:

<RadzenTabs RenderMode="TabRenderMode.Client" @bind-SelectedIndex=@selectedTab Change=@OnTabChange>
    <Tabs>
        <RadzenTabsItem Text="Tab 1" Icon="home">Content 1</RadzenTabsItem>
        <RadzenTabsItem Text="Tab 2" Icon="settings" Disabled="true">Content 2</RadzenTabsItem>
    </Tabs>
</RadzenTabs>
@code {
    int selectedTab = 0;
    void OnTabChange(int index) => Console.WriteLine($"Selected tab: {index}");
}

Constructors

RadzenTabs()

A tabbed interface component that organizes content into multiple panels with clickable tabs for navigation. RadzenTabs allows users to switch between different views or sections without navigating away from the page. Provides a container for RadzenTabsItem components, each representing one tab and its associated content panel. Supports tab positioning at Top, Bottom, Left, Right, TopRight, or BottomRight, server-side rendering (default) or client-side rendering for improved interactivity, programmatic selection via SelectedIndex with two-way binding, Change event when tabs are switched, dynamic tab addition/removal using AddTab() and RemoveItem(), keyboard navigation (Arrow keys, Home, End, Space, Enter) for accessibility, and disabled tabs to prevent selection. Use Server render mode for standard Blazor rendering, or Client mode for faster tab switching with JavaScript.

Declaration

public RadzenTabs()

Examples

Basic tabs with server-side rendering:

<RadzenTabs>
    <Tabs>
        <RadzenTabsItem Text="Orders">
            Order list and details...
        </RadzenTabsItem>
        <RadzenTabsItem Text="Customers">
            Customer information...
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

Tabs with client-side rendering and change event:

<RadzenTabs RenderMode="TabRenderMode.Client" @bind-SelectedIndex=@selectedTab Change=@OnTabChange>
    <Tabs>
        <RadzenTabsItem Text="Tab 1" Icon="home">Content 1</RadzenTabsItem>
        <RadzenTabsItem Text="Tab 2" Icon="settings" Disabled="true">Content 2</RadzenTabsItem>
    </Tabs>
</RadzenTabs>
@code {
    int selectedTab = 0;
    void OnTabChange(int index) => Console.WriteLine($"Selected tab: {index}");
}

Properties

Change

Gets or sets the callback invoked when the user switches to a different tab. Provides the index of the newly selected tab. Use this for side effects or logging.

Declaration

[Parameter]
public EventCallback<int> Change { get; set; }

Property Value

Type	Description
EventCallback<int>	The change event callback receiving the selected tab index.

RenderMode

Gets or sets the rendering mode that determines how tab content is rendered and switched. Server mode re-renders on the server when tabs change, while Client mode uses JavaScript for instant switching.

Declaration

[Parameter]
public TabRenderMode RenderMode { get; set; }

Property Value

Type	Description
TabRenderMode	The tab render mode. Default is Server.

SelectedIndex

Gets or sets the zero-based index of the currently selected tab. Use with @bind-SelectedIndex for two-way binding to track and control the active tab. Set to -1 for no selection (though typically the first tab is selected automatically).

Declaration

[Parameter]
public int SelectedIndex { get; set; }

Property Value

Type	Description
int	The selected tab index. Default is -1 (auto-select first tab).

SelectedIndexChanged

Gets or sets the callback invoked when the selected tab index changes. Used for two-way binding with @bind-SelectedIndex.

Declaration

[Parameter]
public EventCallback<int> SelectedIndexChanged { get; set; }

Property Value

Type	Description
EventCallback<int>	The event callback receiving the new selected index.

SelectedTab

Gets the currently selected RadzenTabsItem based on the selectedIndex.

Declaration

public RadzenTabsItem SelectedTab { get; }

Property Value

Type	Description
RadzenTabsItem

TabPosition

Gets or sets the visual position of the tab headers relative to the content panels. Controls the layout direction and can position tabs at Top, Bottom, Left, Right, TopRight, or BottomRight of the content.

Declaration

[Parameter]
public TabPosition TabPosition { get; set; }

Property Value

Type	Description
TabPosition	The tab position. Default is Top.

Tabs

Gets or sets the render fragment containing RadzenTabsItem components that define the tabs. Each RadzenTabsItem represents one tab with its header and content.

Declaration

[Parameter]
public RenderFragment Tabs { get; set; }

Property Value

Type	Description
RenderFragment	The tabs render fragment containing tab definitions.

Methods

AddTab(RadzenTabsItem)

Adds the tab.

Declaration

public Task AddTab(RadzenTabsItem tab)

Parameters

Type	Name	Description
RadzenTabsItem	tab	The tab.

Returns

Type	Description
Task

BuildRenderTree(RenderTreeBuilder)

A tabbed interface component that organizes content into multiple panels with clickable tabs for navigation. RadzenTabs allows users to switch between different views or sections without navigating away from the page. Provides a container for RadzenTabsItem components, each representing one tab and its associated content panel. Supports tab positioning at Top, Bottom, Left, Right, TopRight, or BottomRight, server-side rendering (default) or client-side rendering for improved interactivity, programmatic selection via SelectedIndex with two-way binding, Change event when tabs are switched, dynamic tab addition/removal using AddTab() and RemoveItem(), keyboard navigation (Arrow keys, Home, End, Space, Enter) for accessibility, and disabled tabs to prevent selection. Use Server render mode for standard Blazor rendering, or Client mode for faster tab switching with JavaScript.

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

OnAfterRenderAsync(bool)

Called by the Blazor runtime.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender

Returns

Type	Description
Task

Overrides

RadzenComponent.OnAfterRenderAsync(bool)

OnInitialized()

Called by the Blazor runtime.

Declaration

protected override void OnInitialized()

Overrides

RadzenComponent.OnInitialized()

Reload()

Reloads this instance.

Declaration

public void Reload()

RemoveItem(RadzenTabsItem)

Removes the item.

Declaration

public void RemoveItem(RadzenTabsItem item)

Parameters

Type	Name	Description
RadzenTabsItem	item	The item.

SetParametersAsync(ParameterView)

Called by the Blazor runtime when parameters are set.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task

Overrides

RadzenComponent.SetParametersAsync(ParameterView)

ShouldRender()

Should render.

Declaration

protected override bool ShouldRender()

Returns

Type	Description
bool

Overrides

ComponentBase.ShouldRender()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable