当前位置: 代码迷 >> 综合 >> 【Dash】如何通过Python循环生成Dash核心组件(html.li,tabs)
  详细解决方案

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

热度:69   发布时间:2023-11-14 11:56:39.0

如果不能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

 

  相关解决方案