如果不能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 htmlfrom dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import plotly.graph_objs as goexternal_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