Мне нужно скрыть некоторые компоненты, например, установив флажок (например, график или таблицу). Однако в документации не было подходящего раздела для этой цели. Заранее спасибо!
Изменение видимости компонента Dash путем обновления другого компонента
Ответы (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, как предполагает этот ответ.
См. Конкретную страницу в документации здесь.