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

Question

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

Answer 1

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'}

Answer 2

Вы можете поместить необходимый компонент внутри html.div([]) и изменить его 'display' на 'none' в обратном вызове. Обратный вызов должен иметь, например, раскрывающийся список как Вход и Компонент внутри html.div([]) как Выход .

Ниже приведено веб-приложение, содержащее только раскрывающийся список и компонент ввода, который отображается / скрывается в зависимости от значения раскрывающегося списка. Должно работать напрямую при копировании:

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 Components внутри того же Div без влияния на их видимость.

Надеюсь, это правильно ответит на ваш вопрос.