【Dash】如何通过Python循环生成Dash核心组件(html.li，tabs)

如果不能google的话 我大概现在已经无路可走了。

前提：

• 了解一下Dash Tab Component：new-dash-tabs-component

或者用的是Dash Bootstrap Component 的Tabs

• dash-bootstrap-components/tabs（Bootstrap无敌 : D

然后循环生成的方法：

generate-tabs-menu-from-list-of-tabs

problem-creating-tabs-dynamically-using-callback

先写解决另一个问题 这个等下来翻译。

example 1

参考链接：https://stackoverflow.com/questions/55935016/how-to-add-html-lists-to-dash-layout

app = dash.Dash(__name__)

trends = ['python', 'flask', 'java']

app.layout = html.Div(
    html.Div(
        className="trend",
        children=[
            html.Ul(id='my-list', children=[html.Li(i) for i in trends])
        ],
    )
)

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

相当于在某个components的chidren里循环生成？

To get this list to update dynamically, you need to hook up a callback that outputs like this: Output('my-list', 'children'). What inputs that callback will take you may already know, but that wasn't part of your post so I left that out.

这个只是预先在layout里生成，如果想要在return output的时候生成，我终于写出来了!!!

example 2

import dash
import dash_core_components as dcc
import dash_table as dt
import dash_html_components as html

from dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css',
                        dbc.themes.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
tabs_list = ['tab1','tab2']
tab_content = ['content1', 'content2']

app.layout = html.Div(
                [
                    html.Button('Submit', id='button'),
                    dbc.Tabs(
                        [
                            #这里面应该是Tab
                        ],
                        id="output-tabs",
                        active_tab="tab1",
                    ),
                    html.Div(id="output-content"),
                ]
            )

@app.callback(
    dash.dependencies.Output('output-tabs', 'children'),
    [dash.dependencies.Input('button', 'n_clicks')],)
def update_output(n_clicks):
    tabs_titles = [dbc.Tab(label=tabs_list[i], tab_id=tabs_list[i]) for i in range(len(tabs_list))]
    return tabs_titles

@app.callback(Output("output-content", "children"),
              [Input("output-tabs", "active_tab")])
def switch_tab(at):
    if at == "tab1":
        return html.P(tab_content[0])
    elif at == "tab2":
        return html.P(tab_content[1])
    return html.P("This shouldn't ever be displayed...")


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

这个是我自己写的代码，前面有点问题，但是不影响对循环生成components的理解

• 第一个callback，是通过button生成tabs-title，也就是tab1, tab2
• 第二个callback，是通过tabs-title，选择显示出的content