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.
IComponent
IHandleEvent
IHandleAfterRender
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
ComponentBase.OnInitializedAsync
ComponentBase.OnParametersSet
ComponentBase.OnParametersSetAsync
ComponentBase.StateHasChanged
ComponentBase.OnAfterRender
ComponentBase.InvokeAsync
ComponentBase.DispatchExceptionAsync
ComponentBase.RendererInfo
ComponentBase.Assets
ComponentBase.AssignedRenderMode
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
public class RadzenTabs : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRenderBasic 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}");
}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.
public RadzenTabs()Gets or sets a value indicating whether the user can reorder tabs by dragging and dropping. When enabled, tab headers become draggable and can be rearranged by the user.
public bool AllowReorder { get; set; }| Type | Description |
|---|---|
| bool | Gets or sets a value indicating whether the user can reorder tabs by dragging and dropping. When enabled, tab headers become draggable and can be rearranged by the user. |
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.
public EventCallback<int> Change { get; set; }| Type | Description |
|---|---|
| EventCallback<int> | 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. |
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.
public TabRenderMode RenderMode { get; set; }| Type | Description |
|---|---|
| TabRenderMode | 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. |
Gets or sets the callback invoked when tabs are reordered via drag and drop. Provides a TabsReorderEventArgs with the old and new index of the moved tab.
public EventCallback<TabsReorderEventArgs> Reorder { get; set; }| Type | Description |
|---|---|
| EventCallback<TabsReorderEventArgs> | Gets or sets the callback invoked when tabs are reordered via drag and drop. Provides a TabsReorderEventArgs with the old and new index of the moved tab. |
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).
public int SelectedIndex { get; set; }| Type | Description |
|---|---|
| int | 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). |
Gets or sets the callback invoked when the selected tab index changes. Used for two-way binding with @bind-SelectedIndex.
public EventCallback<int> SelectedIndexChanged { get; set; }| Type | Description |
|---|---|
| EventCallback<int> | Gets or sets the callback invoked when the selected tab index changes. Used for two-way binding with @bind-SelectedIndex. |
Gets the currently selected RadzenTabsItem based on the selectedIndex.
public RadzenTabsItem SelectedTab { get; }| Type | Description |
|---|---|
| RadzenTabsItem | Gets the currently selected RadzenTabsItem based on the selectedIndex. |
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.
public TabPosition TabPosition { get; set; }| Type | Description |
|---|---|
| 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. |
Gets or sets the render fragment containing RadzenTabsItem components that define the tabs. Each RadzenTabsItem represents one tab with its header and content.
public RenderFragment Tabs { get; set; }| Type | Description |
|---|---|
| RenderFragment | Gets or sets the render fragment containing RadzenTabsItem components that define the tabs. Each RadzenTabsItem represents one tab with its header and content. |
Adds the tab.
public Task AddTab(RadzenTabsItem tab)| Type | Name | Description |
|---|---|---|
| RadzenTabsItem | tab | The tab. |
| Type | Description |
|---|---|
| Task |
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)| Type | Name | Description |
|---|---|---|
| Rendering.RenderTreeBuilder | __builder |
protected override string GetComponentCssClass()| Type | Description |
|---|---|
| string |
protected override Task OnAfterRenderAsync(bool firstRender)| Type | Name | Description |
|---|---|---|
| bool | firstRender |
| Type | Description |
|---|---|
| Task |
Removes the item.
public void RemoveItem(RadzenTabsItem item)| Type | Name | Description |
|---|---|---|
| RadzenTabsItem | item | The item. |
public override Task SetParametersAsync(ParameterView parameters)| Type | Name | Description |
|---|---|---|
| ParameterView | parameters |
| Type | Description |
|---|---|
| Task |
Should render.
protected override bool ShouldRender()| Type | Description |
|---|---|
| bool |