使用 python dash 动态渲染选项卡答案

【问题标题】：Dynamically render tabs with python dash使用 python dash 动态渲染选项卡
【发布时间】：2021-10-06 06:07:03
【问题描述】：

有人知道我将如何根据给定的输入动态呈现选项卡吗？

例如，如果我在文本框中输入一个数字（如 4）并按下提交，我希望在下面显示 4 个带有内容的选项卡（下面是选项卡编号）。如果放 2 我想要 2 个标签。我想我在某处使用了 for 循环，但不确定如何实现。

一旦点击提交开始，我只能显示静态数量的选项卡。

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State


app = dash.Dash()

input_group_Row = dbc.Row([ dbc.Col([        
    dbc.CardBody(
        [
            dbc.InputGroup(
            [
                dbc.InputGroupAddon("Enter number", addon_type="prepend"),
                dbc.Input(id='integer',placeholder="Enter int"),
            ],className="mb-3",),
            ]),
    
                                ]),     
    dbc.Col([
        dbc.Button('Enter', color='primary',id='load', block=True,n_clicks=0),
            ]) 
        ])
app.layout = html.Div([input_group_Row, html.Div(id='output-content')], style = CONTENT_STYLE)

@app.callback(Output('output-content', 'children'),
              [Input('load', 'n_clicks')],
              [State('integer','value')],
              )
def render_tabs(click1, integ):
    output =""
    ctx = dash.callback_context
    action = ctx.triggered[0]['prop_id'].split('.')[0]
    if action == 'load':
        print(type(int(integ)))
        output = integ
        return dcc.Tabs(id='tab', value='tab1',children=[
            dcc.Tab(label='Tab 1', value='tab1', children=[html.Div(output,style={'color': 'blue', 'fontSize': 140})]),
            dcc.Tab(label='Tab 2', value='tab2', children=[html.Div(int(output)+3,style={'color': 'blue', 'fontSize': 140})])
        ])

【问题讨论】：

标签： python dynamic tabs plotly-dash

【解决方案1】：

您可以使用列表推导式。

列表推导式提供了一种创建列表的简洁方式。常见的应用是创建新列表，其中每个元素是应用于另一个序列或可迭代的每个成员的某些操作的结果，或者创建满足特定条件的那些元素的子序列。

https://docs.python.org/3/tutorial/datastructures.html

根据您的示例，您可以执行以下操作：

@app.callback(
    Output("output-content", "children"),
    [Input("load", "n_clicks")],
    [State("integer", "value")],
)
def render_tabs(click1, integ):
    output = ""
    ctx = dash.callback_context
    action = ctx.triggered[0]["prop_id"].split(".")[0]
    if action == "load":
        output = int(integ)
        return dcc.Tabs(
            id="tab",
            value="tab1",
            children=[
                dcc.Tab(
                    label=f"Tab {num + 1}",
                    value=f"tab{num + 1}",
                    children=[html.Div(num)],
                )
                for num in range(output)
            ],
        )

使用 for 循环的相同解决方案可能如下所示：

@app.callback(
    Output("output-content", "children"),
    [Input("load", "n_clicks")],
    [State("integer", "value")],
)
def render_tabs(click1, integ):
    output = ""
    ctx = dash.callback_context
    action = ctx.triggered[0]["prop_id"].split(".")[0]

    if action == "load":
        output = int(integ)

        tabs = []
        for num in range(output):
            tabs.append(
                dcc.Tab(
                    label=f"Tab {num + 1}",
                    value=f"tab{num + 1}",
                    children=[html.Div(num)],
                )
            )

        return dcc.Tabs(
            id="tab",
            value="tab1",
            children=tabs,
        )

【讨论】：