DxFormLayoutTabPage Class

A component that implements a tabbed layout group.

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

Customize a Header

Use the HeaderCssClass property to apply a CSS class to the tab’s header. The header can also contain 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