Changing the label in Dash bootstrap dcc.tab based on callback children

Question

I am using dash core components to create a dash app that includes tabs that return tables based on callbacks. I'm trying to see if it's possible to change the label on the tab itself based on the callback, though it seems like the label will only accept a string, and not a callback with and id and children.

Right now the label of the tab simply says 'Car Type' (this is just a snippet of the code):

    dbc.Row([ 
        dbc.Col(dcc.Dropdown(id='car-types', multi=False,,
                    options=[{'label':x, 'value':x}
                    for x in sorted(car_list)]),
                    #width={'size': 5, "offset": 1, 'order': 1}
            ),        

    html.Div([
        dcc.Tabs([
            dcc.Tab(label='Car Type', children=

                    dbc.Col([
                        html.Div(id="table1"
                                )]
                    )
            )
     @app.callback(
     [Output('table1', 'children'),
     Output('car_label', 'children')],
     [Input('car-types', 'value')],
     [State('car_manuf', 'value')],

  def update_table1(a,b):

        code for table,

        a = code for car_label string

        return html.Div([dt.DataTable(),
            ),  a

But what if I wanted it to say "Car Type SUV" or "Car Type Sedan" based on what the output 'car_label' says, how can I change the label of the tab to say that?

I tried something like:

    html.Div([
        dcc.Tabs([
            dcc.Tab(label='Car Type ' + (children=[],id='car_label'), children=

                    dbc.Col([
                        html.Div(id="table1"
                                )]
                    )

But obviously that won't work. Any suggestions?

score 2 · Accepted Answer · answered Apr 13 '21 at 05:31

Maybe something like this with a dropdown and string formatting.

import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='', id='first-tab', value='tab-1'),
        dcc.Tab(label='', id='second-tab', value='tab-2'),
    ]),
    dcc.Dropdown(id='car-types', multi=False, value='honda',
                 options=[{'label':'honda', 'value':'honda'},
                          {'label':'toyota', 'value':'toyota'}]
                 ),
    dcc.Dropdown(id='car-types2', multi=False, value='tesla',
                 options=[{'label': 'jeep', 'value': 'jeep'},
                          {'label': 'tesla', 'value': 'tesla'}]
                 ),
    html.Div(id='tabs-example-content')
])

@app.callback(Output('tabs-example-content', 'children'),
              Input('tabs-example', 'value'))
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1...')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2...')
        ])

@app.callback(
    Output('first-tab', 'label'),
    Input('car-types', 'value')
)
def update_label(name):
    return f"Car Type: {name}"


@app.callback(
    Output('second-tab', 'label'),
    Input('car-types2', 'value')
)
def update_label(name2):
    return f"Car Type: {name2}"

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

Changing the label in Dash bootstrap dcc.tab based on callback children

1 Answers1