Plotly Dash：Hide/show 滑块组件通过更新不同的下拉组件

Question

我通过更新 Dropdown 组件对 hide/show Slider 组件提供了部分可行的解决方案。该代码可以满足我的要求，但我在网页上遇到错误：

Invalid prop for this component: Property "style" was used with component ID: "slider" in one of the Output items of a callback. This ID is assigned to a dash_core_components.Slider component in the layout, which does not support this property. This ID was used in the callback(s) for Output(s):slider.style

是否可以使用其他属性隐藏 Slider 组件？谢谢。

app.layout = html.Div([
    dcc.Graph(
        id='CZmap'   
    ),
    html.Label('Dropdown'),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Kraje', 'value': 'Kraje'},
            {'label': 'Obce', 'value': 'Obce'}
        ],
        value='Obce'
    ),
     # Create Div to place a conditionally visible element inside
    html.Div([
        # Create element to hide/show, in this case an 'Input Component'
        dcc.Slider
            (
            id='slider',
            min=1,
            max=4,
            step=1,
            value=1,
            marks={str(i): str(i) for i in range(1,5)}
            )
    ], style= {'display': 'block'} # <-- This is the line that will be changed by the dropdown callback
    )
])

@app.callback(
   Output(component_id='slider', component_property='style'),
   [Input(component_id='dropdown', component_property='value')])
def show_hide_element(visibility_state):
    if visibility_state == 'Kraje':
        return {'display': 'block'}
    if visibility_state == 'Obce':
        return {'display': 'none'}

if __name__ == '__main__':
    app.run_server(debug=True)```


  [1]:

Answer 1

您可以为滑块的容器分配一个 id，然后打开和关闭容器的可见性，如下例所示。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

    dcc.Graph(id='CZmap'),

    html.Label('Dropdown'),

    dcc.Dropdown(id='dropdown',
                 options=[{'label': 'Kraje', 'value': 'Kraje'},
                          {'label': 'Obce', 'value': 'Obce'}],
                 value='Obce'),

    # Create Div to place a conditionally visible element inside
    html.Div(id='slider-container', children=[

        # Create element to hide/show, in this case a slider
        dcc.Slider(id='slider',
                   min=1,
                   max=4,
                   step=1,
                   value=1,
                   marks={str(i): str(i) for i in range(1,5)})

    ], style= {'display': 'block'}) # <-- This is the line that will be changed by the dropdown callback

])

@app.callback(
   Output(component_id='slider-container', component_property='style'),
   [Input(component_id='dropdown', component_property='value')])
def show_hide_element(visibility_state):
    if visibility_state == 'Kraje':
        return {'display': 'block'}
    if visibility_state == 'Obce':
        return {'display': 'none'}

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 2

简单的我们可以直接设置一个组件的隐藏属性:

@app.callback(
    Output(component_id='slider-container', component_property='hidden'),
    [Input(component_id='dropdown', component_property='value')])
def show_hide_element(value):
    if visibility_state == 'Kraje':
        return True  # This will make hidden property true
    if visibility_state == 'Obce':
        return False  # This will make hidden property false

使用此解决方案，您无需编辑任何样式，而是直接编辑组件的“隐藏”属性，这可能更优雅。

Plotly Dash：Hide/show 滑块组件通过更新不同的下拉组件

Plotly Dash: Hide/show slider component by updating different dropdown component

python

plotly-dash