DxTabBase.TabTemplate Property

Specifies the tab template.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment TabTemplate { get; set; }

Property Value

Type	Description
RenderFragment	The tab template.

Remarks

The tab template allows you to configure tab appearance. In the following example, tabs have custom appearance and titles. Use the ChildContent property to add content inside your tab page.

Note

Since ChildContent contains nested markup of its parent class, the template content must conform to HTML semantics.

Razor

<DxTabs>
    <DxTabPage>
        <TabTemplate>
            <div class="purple-tab">Custom Tab</div>
        </TabTemplate>
        <ChildContent>
            <div>This is the first tab</div>
        </ChildContent>
    </DxTabPage>
    <DxTabPage>
        <TabTemplate>
            <div class="gray-tab">Custom Tab</div>
        </TabTemplate>
        <ChildContent>
            <div>This is the second tab</div>
        </ChildContent>
    </DxTabPage>
</DxTabs>

CSS

.purple-tab {
    padding: 10px 20px; 
    text-align: center; 
    border-radius:7px;
    background-color: rgb(95,54,111); 
    color:white;
}
.gray-tab {
    padding: 10px 20px; 
    text-align: center; 
    border-radius: 7px;
    background-color: rgb(237,237,237); 
    color: black;
}

Run Demo: Tabs