通过更新其他组件来更改 Dash 组件的可见性 [英] Changing visibility of a Dash Component by updating other Component

问题描述

我需要隐藏一些组件，例如通过单击复选框(例如，图表或表格).但是，该文档没有为此目的提供合适的部分.提前致谢！

I need to hide some Components, for example by clicking on a checkbox (for example, a graph or a table). However, the documentation did not provide a suitable section for this purpose. Thanks in advance!

推荐答案

您可以将需要隐藏的组件放置在 html.div([]) 中并更改其'显示' 选项到回调中的'none'.回调应该有一个下拉列表作为 Input 和 html.div([]) 中的组件作为 Output.

You could place the Component you need to hide inside an html.div([]) and change its 'display' option to 'none' in a callback. The callback should have e.g a Dropdown as Input and the Component inside the html.div([]) as Output.

以下是仅包含一个下拉列表和一个基于下拉列表的值可见/隐藏的输入组件的网络应用程序.复制后应该可以直接使用:

The following is a web app containing only a Dropdown and an Input Component that is visible/hidden based on the value of the Dropdown. It should work directly when copied:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash('example')

app.layout = html.Div([
    dcc.Dropdown(
        id = 'dropdown-to-show_or_hide-element',
        options=[
            {'label': 'Show element', 'value': 'on'},
            {'label': 'Hide element', 'value': 'off'}
        ],
        value = 'on'
    ),

    # Create Div to place a conditionally visible element inside
    html.Div([
        # Create element to hide/show, in this case an 'Input Component'
        dcc.Input(
        id = 'element-to-hide',
        placeholder = 'something',
        value = 'Can you see me?',
        )
    ], style= {'display': 'block'} # <-- This is the line that will be changed by the dropdown callback
    )
    ])

@app.callback(
   Output(component_id='element-to-hide', component_property='style'),
   [Input(component_id='dropdown-to-show_or_hide-element', component_property='value')])

def show_hide_element(visibility_state):
    if visibility_state == 'on':
        return {'display': 'block'}
    if visibility_state == 'off':
        return {'display': 'none'}

if __name__ == '__main__':
    app.run_server(debug=True)

请注意，如果在 html.div([]) 中放置了多个组件，则回调仍将仅更改其所在组件的 'display' 属性输出.因此，您可以将其他 Dash 组件放在同一个 Div 中，而不会影响它们的可见性.

Note that if multiple Components are placed inside the html.div([]), the callback will still only change the 'display' property for the Component that it outputs. Thus, you could place other Dash Components inside the same Div without their visibility being affected.

希望这能正确回答您的问题.

Hope this answers your question properly.

自从两年前给出这个答案以来，Dash 项目和用户文档已经有了很大的发展.文档现在展示了多种实现回调之间状态共享的方法，其中第一种方法是将数据存储在隐藏的 div 中，正如这个答案所建议的那样.

The Dash project and the User Documentation has evolved quite a bit since this answer was given two years ago. The docs now show multiple ways of accomplishing the sharing of state between callbacks, the first of which is by storing data in a hidden div as this answer suggests.

查看文档中的特定页面这里.

See the particular page in the docs here.

这篇关于通过更新其他组件来更改 Dash 组件的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！