Generate Tabs menu from list of tabs

Dash Python
1

I need a Tabs component which is constructed from a list of names, where for each name a separate tab is created with the corresponding name as label and id. I need to have the generated tabs in separate divs which will then be populated with separate content.

Similarly to the example in the User Guide, I tried to output children of the Tabs component from a callback. This resulted in JavaScript Error: “Cannot read property disabled of undefined”.

Here is a simplified version of the code:

tabs_list = ['gen_tab1','gen_tab2']

def generate_tabs_html(available_tabs):
    tabs_html = """
        dcc.Tab(label='{}', id='{}', children=[
            html.Div()
        ])""".format(available_tabs[0],available_tabs[0])
    
    for i in range (1,len(available_tabs)):
        tabs_html += """ 
        dcc.Tab(label='{}', id='{}', children=[
            html.Div()
        ])""".format(available_tabs[i],available_tabs[i])
    return(tabs_html)

app.layout = html.Div([
        dcc.Tabs(id="tabs")     
],id='app-container')


@app.callback(
    [dash.dependencies.Output('tabs', 'children') ],
    [dash.dependencies.Input('login-button', 'n_clicks')])
def update_graph(button_clicks):
    return generate_tabs_html(tabs_list)
2

I solved it - the output of the component generating function should not be string but simply the component. The different components can be then appended:

def generate_tabs_html(available_tabs):
tabs_html =
dcc.Tab(label=available_tabs[0], id=available_tabs[0], children=[
html.Div()
])

for i in range (1,len(available_tabs)):
    tabs_html.append( 
    dcc.Tab(label=available_tabs[i], id=available_tabs[i], children=[
        html.Div()
    ]))
return(tabs_html)
3

When I ran your code, there was an error saying that AttributeError: 'Tab' object has no attribute 'append'
:smiley: I just want to know how did you solve this problem?

4

Where you ever able to work around the attribute error. I need to be able to generate tabs off a list that could be different every-time the dash is created

5

It is sufficient to accumulate the various tabs into a list and return the list

def generate_tabs_html(available_tabs):
   
   tabs=[]
   for i in range (len(available_tabs)):
       tabs.append( 
       dcc.Tab(label=available_tabs[i], id=available_tabs[i], children=[
           html.Div()
       ]))
   return(tabs)