Tabs component with plus button and close button in tab

Dash Python
1

I have a dashboard where I’m using Tabs from dash-bootstrap-components. Right now I have buttons to add a new tab, and delete the currently active tab, and all that is great, but I would like to make it more like a browser, where the new tab button is to the right of the tabs themselves, and where the individual tabs can have an x to close them.

Any good resources on a component that either already exists, or how to extend dbc tabs to have that functionality? Thanks!

2

@MatthewWaller you could use dmc:

import dash_mantine_components as dmc
import dash
from dash import _dash_renderer, html, Input, Output

_dash_renderer._set_react_version("18.2.0")


app = dash.Dash(external_stylesheets=dmc.styles.ALL)
app.layout= dmc.MantineProvider(
    [
        dmc.Tabs([
            dmc.TabsList(
                [
                    dmc.TabsTab("Gallery", value="gallery", leftSection=html.Div("x", id="t_1")),
                    dmc.TabsTab("Messages", value="messages"),
                    dmc.TabsTab("Settings", value="settings"),
                ]
            ),
            dmc.TabsPanel("Gallery tab content", value="gallery"),
            dmc.TabsPanel("Messages tab content", value="messages"),
            dmc.TabsPanel("Settings tab content", value="settings"),
        ],
        color="red",
        orientation="horizontal",
    ),
        dmc.Paper(id="out")
])

@app.callback(
    Output("out", "children"),
    Input("t_1", "n_clicks"),
    prevent_initial_call=True
)
def do_something(n_clicks):
    return f"X has been clicked {n_clicks} times."


if __name__ == "__main__""":
    app.run(debug=True)

```python
2 Likes
3

Thanks for pointing that out! I’ll give it a whirl