通过更新其他组件来更改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([])内，并将其'display'选项更改为'没有" .回调应具有例如 Input 的Dropdown和html.div([])内部的 Output 的Component.

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.

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

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屋！