DxFormLayoutTabPage Class

A component that implements a tabbed layout group.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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.

razor

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

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.

Razor
CSS

razor

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

css

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

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

The following example applies a template:

razor

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

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:

razor

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

Disabled and Read-Only Modes

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

razor

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

Run Demo: Form Layout - Tabbed Groups

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inheritance

Object ComponentBase DxComponentBase FormLayoutItemBase FormLayoutGroupBase DxFormLayoutTabPage