DxTabBase.TextTemplate Property

Specifies the template used to display the tab’s text.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment	The template content.

Remarks

Use the TextTemplate property to apply a template for the tab’s text.

In the following example, the template contains a button that removes a tab:

Razor

<DxTabs>
    @foreach(var tab in TabList) {
        <DxTabPage>
            <TextTemplate>
                <div>
                    @tab
                    <DxButton IconCssClass="oi oi-circle-x"
                              RenderStyle="ButtonRenderStyle.Link"
                              RenderStyleMode="ButtonRenderStyleMode.Text"
                              CssClass="shadow-none remove-padding"
                              Click="() => RemoveTab(tab)" />
                </div>
            </TextTemplate>
            <ChildContent>
                <div class="p-1">
                    The <b>@tab</b> tab's content
                </div>
            </ChildContent>
        </DxTabPage>
    }
</DxTabs>

<DxButton Click="AddTab">Add Tab</DxButton>
<DxButton Click="RestoreTabs">Restore Tabs</DxButton>

@code {
    List<string> TabList = new List<string> { "Required Information", "Additional Information" };
    void RemoveTab(string tab) {
        TabList.Remove(tab);
    }
    @* ... *@
}

CSS

::deep .remove-padding {
    padding-right: 0;
}

View Example: Add Close Tab Buttons