DxTabs Class

A Tabs component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxTabs :
    DxTabsBase

Remarks

The DevExpress Tabs component for Blazor (<DxTabs>) allows you to build tabbed interfaces within your web sites.

Blazor_Navigation_Landing_Tab

Note

Online Demo: Simple Tab Control

To add the <DxTabs> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxTabs>...</DxTabs> markup to your application.

  3. Configure the component (see the sections below).

Tabs

<DxTabs> is a navigation control that consists of multiple tabs. The DxTab class represents a tab. To specify a tab's text, use the Text property.

<DxTabs>
    <DxTab Text="Home"></DxTab>
    <DxTab Text="Products"></DxTab>
    <DxTab Text="Support"></DxTab>
</DxTabs>

Active Tab

A user should click a <DxTabs> tab to activate it, and only one tab can be active at a time. To activate a tab in code, assign its zero-based index within the tabs collection to the ActiveTabIndex property. To handle changes to the active tab, use the ActiveTabIndexChanged event.

Blazor_Tabs_ActiveIndex

<DxTabs @bind-ActiveTabIndex="@ActiveTabIndex">
    <DxTab Text="Home"></DxTab>
    <DxTab Text="Products"></DxTab>
    <DxTab Text="Support"></DxTab>
</DxTabs>
<div class="card dxbs-border-top-0 dxbs-border-radius-top-0">
    <div class="card-body">
        @switch (ActiveTabIndex)
        {
            case 0:
                The "Home" tab is active.
                break;
            case 1:
                The "Products" tab is active.
                break;
            case 2:
                The "Support" tab is active.
                break;

        }
        </div>
    </div>
</div>

@code {
    int activeTabIndex = 1;
    int ActiveTabIndex 
    { 
        get => activeTabIndex; 
        set { activeTabIndex = value; InvokeAsync(StateHasChanged); } 
    }
}

Troubleshooting

If you create a new Blazor project based on the default Microsoft project template, the first tab of the <DxTabs> component can be rendered incorrectly.

This is caused by the following Microsoft issues:

To resolve this issue, write more strict style rules in the site.css file so that they only apply .navbar templates.

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
See Also