Dynamic creating tabs

Dash Python
1

Hey:

In using the tabs in dash mantine components or dash, is there a way to create the tabs dynamically from callbacks?
The content in each tab will be use pattern-matching components. Wonder if there is any issue with that. Thanks.

2

Hey @entropy_l, sure you can do so.

I did this here using dash-bootstrap-components.

3

Hey @entropy_l , here an example using dah-mantine-components.

import dash_mantine_components as dmc
from dash import Dash, html, Input, Output, Patch
import uuid


app = Dash(__name__)

app.layout = html.Div(
    children=[
        dmc.Button(
            children='create tab',
            id='btn'
        ),
        dmc.Button(
            children='change name', 
            id='btn_1'
        ),
        dmc.Tabs(
            id='tabs',
            children=[
                dmc.TabsList(
                    id='tab_list',
                    children=[
                        dmc.Tab(
                            id='your_id',
                            children="Gallery",
                            value="gallery"
                        ),
                        dmc.Tab("Messages", value="messages"),
                        dmc.Tab("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="vertical",
        )
    ]
)


@app.callback(
    Output('tabs', 'children'),
    Output('tab_list', 'children'),
    Input('btn', 'n_clicks'),
    prevent_initial_call=True
)
def copy(n_clicks):
    just_an_id = uuid.uuid4().hex

    # add the new tab
    patched_tab_list = Patch()
    patched_tab_list.append(
        dmc.Tab(
            id={'type': 'tab', 'index': n_clicks},
            children=f'tab {n_clicks}',
            value=just_an_id
        )
    )

    # add new tab content
    patched_tabs = Patch()
    patched_tabs.append(
        dmc.TabsPanel(
            id={'type': 'tab_panel', 'index': n_clicks},
            children=f'some dynamic content, button click: {n_clicks}',
            value=just_an_id
        )
    )

    return patched_tabs, patched_tab_list


@app.callback(
    Output('your_id', 'children'),
    Input('btn_1', 'n_clicks'),
    prevent_initial_call=True
)
def change(n_clicks):
    return f'name changed {n_clicks}'


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

I included the answer to your other question in this example too.