【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
    评论
以下是一个简单的 Python DASH 组件的代码示例: ```python import dash import dash_html_components as html from dash.dependencies import Input, Output, State import dash_core_components as dcc # 创建自定义组件 class MyComponent(dcc.Component): # 组件的唯一 ID _namespace = 'mycomponent' # 组件的默认属性 _default_props = {'label': 'Hello World!'} # 组件的属性列表 _prop_names = ['label'] # 组件HTML 元素 _type = 'div' # 组件的构造函数 def __init__(self, id, label=None, **kwargs): super().__init__(id=id, **kwargs) self.label = label or self._default_props['label'] # 组件的渲染方法 def render(self): return html.Div(self.label, id=self.id) # 创建 Dash 应用 app = dash.Dash(__name__) # 创建自定义组件实例 my_component = MyComponent('my-component', label='My Custom Component') # 将组件添加到应用布局中 app.layout = html.Div([ html.H1('My App'), my_component, html.Button('Update Component', id='update-button'), html.Div(id='output') ]) # 定义更新组件的回调函数 @app.callback(Output('my-component', 'label'), [Input('update-button', 'n_clicks')]) def update_label(n_clicks): if n_clicks: return f'Updated Label ({n_clicks})' else: return my_component.label if __name__ == '__main__': app.run_server(debug=True) ``` 这个例子中,我们首先定义了一个名为 `MyComponent` 的自定义组件类。这个类继承自 `dcc.Component`,并定义了组件的 ID、默认属性、属性列表和 HTML 元素类型等信息。类中还包含了构造函数和渲染方法等。 在应用布局中,我们创建了一个 `MyComponent` 的实例,并将其添加到了布局中。我们还定义了一个按钮,用于更新组件的标签。在回调函数中,我们使用 `Input` 和 `Output` 装饰器,将按钮的点击事件作为输入,将组件的标签作为输出。回调函数会根据按钮点击次数更新标签。 这个例子只是一个简单的示例,你可以根据自己的需求来定义自己的组件

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值