[英]Plotly Dash: Hide/show slider component by updating different dropdown component
I have partially working solution to hide/show Slider component by updating Dropdown component.我有部分工作解决方案通过更新下拉组件来隐藏/显示 Slider 组件。 The code does what I want it to but I'm getting an error on the webpage:
该代码执行我想要的操作,但我在网页上遇到错误:
Invalid prop for this component: Property "style" was used with component ID: "slider" in one of the Output items of a callback.
此组件的无效道具:属性“样式”与组件 ID:“滑块”一起用于回调的 Output 项之一。 This ID is assigned to a dash_core_components.Slider component in the layout, which does not support this property.
此 ID 分配给布局中的 dash_core_components.Slider 组件,该组件不支持此属性。 This ID was used in the callback(s) for Output(s):slider.style
此 ID 用于输出的回调:slider.style
Is it possible to hide Slider component using other property?是否可以使用其他属性隐藏 Slider 组件? Thank you.
谢谢你。
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]: https://stackoverflow.com/questions/50213761/changing-visibility-of-a-dash-component-by-updating-other-component
You could assign an id to the slider's container, and then switch on and off the visibility of the container as in the example below.您可以为滑块的容器分配一个 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)
Simply we can set the hidden property of a component directly:很简单,我们可以直接设置组件的隐藏属性:
@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
With this solution you don't have to edit any styles but directly the component's "hidden" property which might be more elegant.使用此解决方案,您不必编辑任何 styles 而是直接编辑组件的“隐藏”属性,这可能更优雅。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.