DxFormLayoutTabPage Class
A component that implements a tabbed layout group.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.dll
NuGet Package: DevExpress.Blazor
#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>
#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>
Use the CaptionTemplate property to specify the caption’s custom content.
The following example applies a template:
<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:
<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.
<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>