Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxFormLayoutTabPage.HeaderTemplate Property

Specifies the template used to display the tab header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment HeaderTemplate { get; set; }

#Property Value

Type Description
RenderFragment

Header template.

#Remarks

Specify the HeaderTemplate property to replace a Form Layout tab page header. If you use this property, place layout items (tab content) in the Items collection.

<DxFormLayout>
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage Caption="Work Information">
            <HeaderTemplate>
                <div class="my-tab">
                    Work Information
                </div>
            </HeaderTemplate>
            <Items>
                <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                    <DxTextBox @bind-Text="@FirstName" />
                </DxFormLayoutItem>
                <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                    <DxTextBox @bind-Text="@LastName" />
                </DxFormLayoutItem>
                <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6">
                    <DxDateEdit @bind-Date="@BirthDate" />
                </DxFormLayoutItem>
            </Items>
        </DxFormLayoutTabPage>
        <DxFormLayoutTabPage Caption="Personal Information" />
    </DxFormLayoutTabPages>
</DxFormLayout>

Header template

See Also