DxFormLayoutTabPage.HeaderCssClass Property
Specifies the name of the CSS class applied to the tab.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v23.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(null)]
[Parameter]
public string HeaderCssClass { get; set; }
Property Value
Type | Default | Description |
---|---|---|
String | null | The CSS class name. |
Remarks
To define the appearance of the tab, assign a CSS class name to the HeaderCssClass
property.
<DxFormLayout>
<DxFormLayoutTabPages>
<DxFormLayoutTabPage Caption="Personal Information" HeaderCssClass="bg-success">
<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>
</DxFormLayoutTabPage>
@* ... *@
</DxFormLayoutTabPages>
</DxFormLayout>
@code {
int ActiveTabIndex { get; set; } = 1;
string FirstName { get; set; } = "Nancy";
string LastName { get; set; } = "Davolio";
DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
string Position { get; set; } = "Sales Representative";
DateTime HireDate { get; set; } = DateTime.Now.AddYears(-20);
string Notes { get; set; } = "Education includes a BA in psychology.";
}
For more information, see the following help topic: CSS Classes.
See Also