DxTabBase.TabTemplate Property

Specifies the tab template.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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

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