DxTabPage Class

A tab with content within a Tabs component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxTabPage :
    DxTabBase

Remarks

The DxTabPage allows you to create a tab with content within the DxTabs component.

Razor

<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);
    }
}

Employee

public class Employee {
    public string Title { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Position { get; set; }
    public DateTime BirthDate { get; set; }
    public DateTime HireDate { get; set; }
    public string Notes { get; set; }
    public string FileName { get; set; }
}

Run Demo: Tabs - Tab Pages Watch Video: Get Started with Tabs

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

<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">
            <DxGrid Data="@Data">
                <Columns>
                    <DxGridDataColumn FieldName=@nameof(WeatherForecast.Date) />
                    <DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)" />
                    <DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)" />
                    <DxGridDataColumn FieldName="@nameof(WeatherForecast.CloudCover)" />
                    <DxGridDataColumn FieldName="@nameof(WeatherForecast.Precipitation)">
                        <CellDisplayTemplate>
                            <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
                        </CellDisplayTemplate>
                    </DxGridDataColumn>
                </Columns>
            </DxGrid>
        </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" };
    object Data;

    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());
    }

    protected override async Task OnInitializedAsync() {
        Data = await GetForecastAsync();
    }
}

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

Inheritance

Object

ComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DxSettingsComponent

DxTabBase

DxTabPage