Radzen tabs close by click

Radzen.Blazor Components
2

Hi @gpatounis,

Setting the Icon of a tab item won't make it closeable as there is no such built-in feature. You have to use the Template and add a button with a Click event. Here is a working demo:

    <RadzenTabs>
        <Tabs>
            @if (tab1Visible)
            {
            <RadzenTabsItem>
                <Template>
                    <span style="display: flex; gap: 6px">
                    <RadzenButton Icon="close" @onclick:stopPropagation Click=@(() => tab1Visible = !tab1Visible) Size="ButtonSize.ExtraSmall" />
                    Tab 1
                    </span>
                </Template>
                <ChildContent>
                    Tab 1
                </ChildContent>
            </RadzenTabsItem>
            }
            @if (tab2Visible)
            {
            <RadzenTabsItem>
                <Template>
                    <span style="display: flex; gap: 6px">
                    <RadzenButton Icon="close" @onclick:stopPropagation Click=@(() => tab2Visible = !tab2Visible) Size="ButtonSize.ExtraSmall" />
                    Tab 2
                    </span>
                </Template>
                <ChildContent>
                    Tab 2
                </ChildContent>
            </RadzenTabsItem>
            }
        </Tabs>
    </RadzenTabs>

@code {
    bool tab1Visible = true;
    bool tab2Visible = true;
}

Important: it won't work with the Material theme because of the ripple effect and having two nested clickable elements (the tab and the button inside).