dash 中的模式匹配回调函数Pattern-Matching Callbacks 8

模式匹配

模式匹配回调选择器 MATCH、ALL 和 ALLSMALLER 允许您编写可以响应或更新任意或动态数量组件的回调函数。

此示例呈现任意数量的 dcc. Dropdown 元素,并且只要任何 dcc. Dropdown 元素发生更改,就会触发回调。尝试添加几个下拉菜单并选择它们的值,以查看应用程序如何更新。

效果:

代码

python 复制代码
# 导入Dash库及其相关组件  
from dash import Dash, dcc, html, Input, Output, ALL, Patch, callback

# 创建一个Dash应用实例  
app = Dash(__name__)

# 设置应用的布局  
app.layout = html.Div(
    [
        # 添加一个按钮,用于添加过滤器,id为"add-filter-btn",并设置初始点击数为0  
        html.Button("添加过滤器", id="add-filter-btn", n_clicks=0),
        # 创建一个div容器,用于存放下拉菜单组件,id为"dropdown-container-div",初始子元素为空  
        html.Div(id="dropdown-container-div", children=[]),
        # 创建一个div容器,用于显示下拉菜单的选择结果,id为"dropdown-container-output-div"  
        html.Div(id="dropdown-container-output-div"),
    ]
)


# 定义一个回调函数,当"add-filter-btn"按钮被点击时触发
@callback(
    # 设置输出目标为"dropdown-container-div"的子元素  
    Output("dropdown-container-div", "children"),
    # 设置输入源为"add-filter-btn"的点击事件  
    Input("add-filter-btn", "n_clicks")
)
def display_dropdowns(n_clicks):
    # 创建一个Patch对象,用于存放新的下拉菜单组件  
    patched_children = Patch()
    # 创建一个新的下拉菜单组件,包含四个城市选项,id根据点击次数动态生成  
    new_dropdown = dcc.Dropdown(
        ["NYC", "MTL", "LA", "TOKYO"],
        id={"type": "city-filter-dropdown", "index": n_clicks},
    )
    # 将新的下拉菜单组件添加到Patch对象中  
    patched_children.append(new_dropdown)
    # 返回Patch对象,更新"dropdown-container-div"的子元素  
    return patched_children


# 定义一个回调函数,当下拉菜单的值发生变化时触发
@callback(
    # 设置输出目标为"dropdown-container-output-div"的子元素  
    Output("dropdown-container-output-div", "children"),
    # 设置输入源为所有"city-filter-dropdown"类型的下拉菜单的值变化事件  
    Input({"type": "city-filter-dropdown", "index": ALL}, "value"),
)
def display_output(values):
    # 遍历所有下拉菜单的值,创建一个包含结果的div组件列表  
    return html.Div(
        [html.Div(f"下拉菜单 {i + 1} = {value}") for (i, value) in enumerate(values)]
    )


# 当脚本作为主程序运行时,启动Dash应用,并开启调试模式
if __name__ == "__main__":
    app.run(debug=True)

上一篇

相关推荐
费弗里4 天前
magic-dash及各Dash组件库正式版全线支持Dash 3.x新版本
python·dash
爱补鱼的猫猫9 天前
Matplotlib和Plotly知识点(Dash+Plotly分页展示)
plotly·matplotlib·dash
程序员白彬16 天前
H5 直播技术中,MPEG-DASH 和 HLS 在切片上有什么区别
hls·dash·web 直播
费弗里20 天前
Python全栈应用开发利器Dash 3.x新版本介绍(4)
python·dash
旷世奇才李先生20 天前
Dash 安装使用教程
dash
费弗里22 天前
Python全栈应用开发利器Dash 3.x新版本介绍(3)
python·dash
费弗里25 天前
Python全栈应用开发利器Dash 3.x新版本介绍(2)
python·dash
费弗里25 天前
Python全栈应用开发利器Dash 3.x新版本介绍(1)
python·dash
vortex52 个月前
探索 Shell:选择适合你的命令行利器 bash, zsh, fish, dash, sh...
linux·开发语言·bash·shell·dash
小白白2 个月前
解密并下载受DRM保护的MPD(DASH流媒体)加密视频
音视频·dash