Skip to main content
All docs
V25.1
  • DxFormLayoutTabPage.HeaderTemplate Property

    Specifies the template used to display the tab header.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [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