通过更新其他组件来更改 Dash 组件的可见性

Posted 2023-02-16

【中文标题】通过更新其他组件来更改 Dash 组件的可见性

【英文标题】：Changing visibility of a Dash Component by updating other Component

【发布时间】：2018-10-17 05:36:29

【问题描述】：

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

【参考方案1】：

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

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

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 中，而不会影响它们的可见性。

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

更新（2020 年 5 月）

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

请参阅文档here 中的特定页面。

【讨论】：

是否可以默认隐藏元素？如果我在您的代码中尝试： style= 'display': 'none' #

【参考方案2】：

dcc.RadioItems(
                id='show-table',
                options=['label': i, 'value': i for i in ['None', 'All', 'Alerts']],
                value='None',
                labelStyle='display': 'inline-block'
            )
html.Div([
        dash_table.DataTable(
        id = 'datatable',
        data=today_df.to_dict('records'),
        columns=['id': c, 'name': c for c in today_df.columns],
        fixed_columns= 'headers': True, 'data': 1 ,
        fixed_rows= 'headers': True, 'data': 0 ,
        style_cell=
        # all three widths are needed
        'minWidth': '150px', 'width': '150px', 'maxWidth': '500px',
        'whiteSpace': 'no-wrap',
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',
        ,
        style_table='maxWidth': '1800px',
        filter_action="native",
        sort_action="native",
        sort_mode='multi',
        row_deletable=True),
    ], style='width': '100%', id='datatable-container')

 @app.callback(
    dash.dependencies.Output('datatable-container', 'style'),
    [dash.dependencies.Input('show-table', 'value')])
def toggle_container(toggle_value):
    print(toggle_value, flush=True)
    if toggle_value == 'All':
        return 'display': 'block'
    else:
        return 'display': 'none'

【讨论】：

虽然这段代码可能会回答这个问题，但最好在不介绍其他人的情况下解释它是如何解决问题的，以及为什么要使用它。从长远来看，纯代码的答案没有用处。