DxFormLayoutTabPage.HeaderTemplate Property

Specifies the template used to display the tab header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.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.

Razor

<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>

CSS

background-color: violet;
padding-top: 10px;