DxTabs Class

A Tabs component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxTabs :
    DxComponentBase,
    ITabCollectionOwner,
    IRequireSelfCascading

Remarks

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

Navigation Landing Tab

Run Demo: Tabs

Add Tabs to a Project

Follow the steps below to add the Tabs component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxTabs>...</DxTabs> markup to a Razor page.
  3. Configure the component (see the sections below).

Tabs

<DxTabs> is a navigation component that consists of multiple tabs. The DxTab class implements a tab. Use the Text property to specify a tab's text.

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

Active Tab

A user should click a tab to activate it. Only one tab can be active at a time. To activate a tab in code, assign its zero-based index in the tab collection to the ActiveTabIndex property. The ActiveTabIndexChanged event fires when the active tab changes.

The following example demonstrates how to update the content area when a user selects a tab.

<DxTabs @bind-ActiveTabIndex="@ActiveTabIndex">
<DxTab Text="About Us"></DxTab>
<DxTab Text="Web Controls"></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:
                <h4>From 1998 to the Present</h4>
                <p>We look forward to working with you and will do everything we can to make your experience with us a profitable one.</p>
                break;
            case 1:
                <ul>
                    <li><a href="https://www.devexpress.com/products/net/controls/asp/">ASP.NET Web Forms </a></li>
                    <li><a href="https://www.devexpress.com/products/net/controls/asp/mvc/">ASP.NET MVC</a></li>
                    <li><a href="https://www.devexpress.com/products/net/controls/asp/core.xml">ASP.NET Core</a></li>
                    <li><a href="https://www.devexpress.com/products/net/controls/asp/bootstrap-webforms.xml">Bootstrap Web Forms</a></li>
                    <li><a href="https://js.devexpress.com/">JavaScript – jQuery, Angular, React, Vue</a></li>
                    <li><a href="https://www.devexpress.com/blazor/">Blazor</a></li>
                    <li><a href="https://www.devexpress.com/subscriptions/reporting/">Web Reporting</a></li>
                </ul>
                break;
            case 2:
                <p>Submit your support inquiries via the <a href="https://supportcenter.devexpress.com/">DevExpress Support Center</a> for assistance.</p>
                break;

        }
    </div>
</div>
@code {
    int ActiveTabIndex { get; set; } = 1;
}

Tabs ActiveIndex

Run Demo: Tabs - Active Tab

Tab Pages

Use the DxTabPage class to create a tab page within the <DxTabs> component.

<DxTabs>
    @foreach (var employee in Employees)
    {
        <DxTabPage Text="@(employee.FirstName + ' ' +  employee.LastName)">
            <div class="media demo-tab-page-content">
                <img src="@(StaticAssetUtils.GetImagePath($"Employees/{employee.FileName}.png"))" width="125" />
                <div class="media-body pl-3">
                    <h5 class="mt-0">@employee.Title @employee.FirstName @employee.LastName</h5>
                    <p><b>Birthday:</b> @employee.BirthDate.ToShortDateString()</p>
                    <p>@employee.Notes</p>
                </div>
            </div>
        </DxTabPage>
    }
</DxTabs>
@code {
    IEnumerable<Employee> Employees;

    protected override async Task OnInitializedAsync()
    {
        Employees = (await EmployeeService.Load()).Skip(5).Take(3);
    }
}

Tabs TabPage

Run Demo: Tabs- Tab Pages

A tab page can include other DevExpress Blazor components. The following code creates a tab page with the DxDataGrid component.

@using System.Threading

<DxTabs style="width:950px">
    <DxTabPage Text="Description">
        <div class="p-3">
            <b>7-Day Weather Forecast</b>
        </div>
    </DxTabPage>
    <DxTabPage Text="Forecast">
        <div class="py-3">
            <DxDataGrid DataAsync="@GetForecastAsync" style="width:950px">
                <DxDataGridDateEditColumn Field=@nameof(WeatherForecast.Date) />
                <DxDataGridSpinEditColumn Field=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)" />
                <DxDataGridSpinEditColumn Field=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)" />
                <DxDataGridColumn Field="@nameof(WeatherForecast.CloudCover)" />
                <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)" />
            </DxDataGrid>
        </div>
    </DxTabPage>

</DxTabs>

@code {
    public class WeatherForecast {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        public string CloudCover { get; set; }
        public bool Precipitation { get; set; }
    }

    String[] CloudCover = { "Sunny", "Partly cloudy", "Cloudy", "Storm" };

    public Task<IEnumerable<WeatherForecast>> GetForecastAsync(CancellationToken ct = default) {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Task.FromResult(Enumerable.Range(1, 7).Select(index => new WeatherForecast {
            Date = startDate.AddDays(index),
            TemperatureC = rng.Next(-15, 20),
            CloudCover = CloudCover[rng.Next(0, CloudCover.Length)],
            Precipitation = Convert.ToBoolean(rng.Next(0, 2))
        }).AsEnumerable());
    }
}

Tabs With Data Grid

Tab Icons

Use the TabIconCssClass property to display an icon in the tab.

<DxTabs>
    <DxTab Text="Informaton" TabIconCssClass="info"></DxTab>
    @*...*@
</DxTabs>

Tabs Icons

Tab Template

Use the TabTemplate property to customize a tab's appearance.

<DxTabs>
    <DxTab>
        <TabTemplate>
            <div style="padding:10px 20px; text-align:center; border-radius:7px; 
                 background-color:rgb(95,54,111); color:white">Custom Tab</div>
        </TabTemplate>
    </DxTab>
    @*...*@
</DxTabs>

Tabs Template

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.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
See Also