使用 python 破折号动态呈现选项卡

Question

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

例如，如果我在文本框中输入一个数字（如 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})])
        ])

Answer 1

您可以使用列表理解。

List comprehensions provide a concise way to create lists. Common applications are to make new lists where each element is the result of some operations applied to each member of another sequence or iterable, or to create a subsequence of those elements that satisfy a certain condition.

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,
        )

使用 python 破折号动态呈现选项卡

Dynamically render tabs with python dash

python

tabs

dynamic

plotly-dash