Radzen tabs close by click

Radzen.Blazor Components
1

Hellooo,

I am trying to remove a tab on click. I can display any Icon on radzen tab item but when I click it is not working.

image

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).

3

thanks for you answer. My mistake was that I used material Theme :frowning:

have a nice day

4

Hi,
I am using material theme in the application. Could you please suggest a method to disable ripple effect for this page/control or is there any other work around to resolve the issue.
Thanks

5
6

Indeed setting z-index is a work around

<Radzen.Blazor.RadzenTabs SelectedIndex="@tabIndex" SelectedIndexChanged="@(args => NewIndexChange(args))">
    <Tabs>
    
        @foreach (var i in tabs)
        {
        <Radzen.Blazor.RadzenTabsItem Text="@($"Tab {i.Text}")">
            <Template>
                <RadzenButton Style="z-index:2" Click="@AddTab">Add Tab</RadzenButton>
                <RadzenButton Style="z-index:2" Click="@RemoveTab">Remove Tab</RadzenButton>
                <span style="display: flex; gap: 6px">
                        @($"Tab {i.Text}")"
                </span>
            </Template>
        </Radzen.Blazor.RadzenTabsItem>
        }
    </Tabs>
</Radzen.Blazor.RadzenTabs>

Thanks

7

Hi,
is it possible to show the button in the template only if it is in the selected Tab?
br and thx