Изменение видимости компонента Dash путем обновления другого компонента

Мне нужно скрыть некоторые компоненты, например, установив флажок (например, график или таблицу). Однако в документации не было подходящего раздела для этой цели. Заранее спасибо!


person Иван Ситников    schedule 07.05.2018    source источник


Ответы (2)


Вы можете поместить компонент, который нужно скрыть, внутри 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 г.)

Проект Dash и пользовательская документация претерпели значительные изменения с тех пор, как этот ответ был дан два года назад. В документах теперь показано несколько способов выполнения совместного использования состояния между обратными вызовами, первым из которых является сохранение данных в скрытом div, как предполагает этот ответ.

См. Конкретную страницу в документации здесь.

person Tim Skov Jacobsen    schedule 18.05.2018
comment
Можно ли по умолчанию скрыть элемент? Если я попробую в вашем коде: style = {'display': 'none'} # ‹- Это строка ... компонент ввода вообще не отображается. Даже если я переключу раскрывающийся список на «Вкл.». - person DerDressing; 17.11.2020

person    schedule
comment
Хотя этот код может ответить на вопрос, было бы лучше объяснить, как он решает проблему, не вводя других, и зачем его использовать. Ответы, содержащие только код, в конечном итоге бесполезны. - person Hoog; 09.07.2019