DxTabs Class
A Tabs component.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v20.2.dll
NuGet Package: DevExpress.Blazor
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.
Add Tabs to a Project
Follow the steps below to add the Tabs component to an application:
- 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.
- Add the
<DxTabs>
…</DxTabs>
markup to a Razor page. - 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;
}
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);
}
}
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());
}
}
Tab Icons
Use the TabIconCssClass property to display an icon in the tab.
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>
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.