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

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

前提

或者用的是Dash Bootstrap Component 的Tabs

然后循环生成的方法:

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

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值