根据回调子项更改 Dash bootstrap dcc.tab 中的标签

Question

我正在使用 dash 核心组件创建一个 dash 应用程序，其中包含 return 基于回调的表格的选项卡。我正在尝试查看是否可以根据回调更改选项卡本身上的标签，尽管标签似乎只接受字符串，而不是带有 id 和子项的回调。

现在选项卡的标签只显示 'Car Type'（这只是代码片段）：

    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

但是，如果我想让它根据输出 'car_label' 的内容显示“SUV 车型”或“Sedan 车型”，我该如何更改选项卡的标签来表示？

我试过类似的方法：

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

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

但显然那是行不通的。有什么建议吗？

Answer 1

也许是这样的，带有下拉菜单和字符串格式。

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)

根据回调子项更改 Dash bootstrap dcc.tab 中的标签

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

python

plotly-dash

dash-bootstrap-components