DxFormLayoutTabPage Class

A component that implements a tabbed layout group.

Assembly: DevExpress.Blazor.v23.2.dll

Declaration

public class DxFormLayoutTabPage :
    FormLayoutGroupBase,
    IFormLayoutLevel

Remarks

The Form Layout stores its tabbed layout groups in a DxFormLayoutTabPages collection. A DxFormLayoutTabPage class instance is an individual tabbed layout group that can contain layout groups and items.

<DxFormLayout>
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage Caption="Personal Information">
            @* ... *@
        </DxFormLayoutTabPage>
        <DxFormLayoutTabPage Caption="Work Information">
            <DxFormLayoutItem Caption="Position:" ColSpanMd="6" >
                @* ... *@
            </DxFormLayoutItem>
            @* ... *@
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

Tab Example

Customize a Caption

Use the CaptionPosition property to place the caption of a nested item above it (Vertical) or at its left border (Horizontal). You can also assign a CSS class to the caption.

<style>
    .my-style {
        font-style: italic;
        color: red;
    }
</style>

<DxFormLayout>
    <DxFormLayoutTabPages @bind-ActiveTabIndex="@ActiveTabIndex" >
        <DxFormLayoutTabPage Caption="Personal Information" CaptionCssClass="my-style">
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                <DxTextBox @bind-Text="@FirstName" />
            </DxFormLayoutItem>
            @*...*@
        </DxFormLayoutTabPage>
        @*...*@
    </DxFormLayoutTabPages>
</DxFormLayout>

Form Layout Tabbed Group CSS Class

Use the CaptionTemplate property to specify the caption’s custom content.

The following example shows how to apply a template:

<DxFormLayout>
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage>
            <CaptionTemplate>
                <em>Work Information</em>
            </CaptionTemplate>
            <Items>
                @* ... *@
            </Items>
        </DxFormLayoutTabPage>
        <DxFormLayoutTabPage Caption="Personal Information"></DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

Form Layout Tab - CaptionTemplate

Customize a Header

Use the HeaderCssClass property to apply a CSS class to the tab’s header. The header can also contain an icon. Use the HeaderIconCssClass property to specify an icon’s CSS class or the HeaderIconUrl property to specify its URL. In the following example, tabs use Open Iconic icons:

<DxFormLayout>
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage HeaderIconCssClass="oi oi-envelope-closed" Caption="Work Information" />
        <DxFormLayoutTabPage HeaderIconCssClass="oi oi-book" Caption="Personal Information" />
    </DxFormLayoutTabPages>
</DxFormLayout>

Form Layout Tab with an Icon

Disabled and Read-Only Modes

You can disable auto-generated editors within the tab page or mark them as read-only.

<DxFormLayout Data="@editFormData"
              ItemUpdating="@((pair) => OnItemUpdating(pair.Key, pair.Value))">
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage Caption="Employee Information" Enabled="false">
            <DxFormLayoutItem Field="@nameof(FormDataItem.Name)"
                              Caption="Contact Name:"
                              ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.BirthDate)"
                              Caption="Birth Date:"
                              ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)"
                              Caption="Years Worked:"
                              ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.OnVacation)"
                              Caption="On Vacation:"
                              ColSpanMd="6" />
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

Disabled Editors